2019-11-05

CSS Border 边框

前言

CSS 边框属性允许你指定一个元素边框的样式和颜色。
用 CSS3，可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。
当有交界的边同时出现边框的时候，就会以倾斜的形式表现交界线。

属性	描述	CSS	🔗
border	简写属性，用于把针对四个边的属性设置在一个声明	1	🔗
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式	1	🔗
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度	1	🔗
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色	1	🔗

border-top	简写属性，用于把上边框的所有属性设置到一个声明中	1	🔗
border-top-style	设置元素的上边框的样式	1	🔗
border-top-color	设置元素的上边框的颜色	1	🔗
border-top-width	设置元素的上边框的宽度	1	🔗

border-right	简写属性，用于把右边框的所有属性设置到一个声明中	1	🔗
border-right-style	设置元素的右边框的样式	1	🔗
border-right-color	设置元素的右边框的颜色	1	🔗
border-right-width	设置元素的右边框的宽度	1	🔗

border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中	1	🔗
border-bottom-style	设置元素的下边框的样式	1	🔗
border-bottom-color	设置元素的下边框的颜色	1	🔗
border-bottom-width	设置元素的下边框的宽度	1	🔗

border-left	简写属性，用于把左边框的所有属性设置到一个声明中	1	🔗
border-left-style	设置元素的左边框的样式	1	🔗
border-left-color	设置元素的左边框的颜色	1	🔗
border-left-width	设置元素的左边框的宽度	1	🔗

border-radius	设置或检索对象使用圆角边框	3	🔗
border-top-left-radius	定义左上角边框的形状	3	🔗
border-top-right-radius	定义右上角边框的形状	3	🔗
border-bottom-left-radius	设置或检索对象的左下角圆角边框。提供 2 个参数，2 个参数以空格分隔，每个参数允许设置1个参数值，第 1 个参数表示水平半径，第 2 个参数表示垂直半径，如第 2 个参数省略，则默认等于第 1 个参数	3	🔗
border-bottom-right-radius	设置或检索对象的右下角圆角边框	3	🔗

border-image	设置或检索对象的边框样式使用图像来填充	3	🔗
border-image-outset	规定边框图像超过边框的量	3	🔗
border-image-repeat	规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）	3	🔗
border-image-slice	规定图像边框的向内偏移	3	🔗
border-image-source	规定要使用的图像，代替 border-style 属性中设置的边框样式	3	🔗
border-image-width	规定图像边框的宽度	3	🔗

box-shadow	附加一个或多个下拉框的阴影	3	🔗

1、简写属性

缩写边框属性设置在一个声明中所有的边框属性。

属性	描述	CSS	备注	🔗
border	简写属性。用于把所有用于表格的属性设置于一个声明中	1		🔗

属性值

值	描述
border-width	指定边框的宽度
border-style	指定边框的样式
border-color	指定边框的颜色
inherit	指定应该从父元素继承 border 属性值

可以设置的属性分别（按顺序）：
- border-width
- border-style
- border-color
如果上述值缺少一个没有关系，例如 border: ＃FF0000; 是允许的。

实例

<style>
    p {
        border: 2px solid red;
    }
</style>

1	<p>段落中的一些文本。</p>

效果

段落中的一些文本。

2、样式

边框样式属性指定要显示什么样的边界。

属性	描述	CSS	🔗
border-style	指定表格边框的样式	1	🔗

border-top-style	设置元素的上边框的样式	1	🔗
border-right-style	设置元素的右边框的样式	1	🔗
border-bottom-style	设置元素的下边框的样式	1	🔗
border-left-style	设置元素的左边框的样式	1	🔗

属性值

值	描述
none	定义无边框
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突
dotted	定义点状边框。在大多数浏览器中呈现为实线
dashed	定义虚线。在大多数浏览器中呈现为实线
solid	定义实线
double	定义双线。双线的宽度等于 border-width 的值
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值
inset	定义 3D inset 边框。其效果取决于 border-color 的值
outset	定义 3D outset 边框。其效果取决于 border-color 的值
inherit	规定应该从父元素继承边框样式

border-style 属性可以有一到四个值。
- border-style: dotted solid double dashed;
  - 上边框是点状
  - 右边框是实线
  - 下边框是双线
  - 左边框是虚线
- border-style: dotted solid double;
  - 上边框是点状
  - 右边框和左边框是实线
  - 下边框是双线
- border-style: dotted solid;
  - 上边框和下边框是点状
  - 右边框和左边框是实线
- border-style: dotted;
  - 所有4个边框都是点状

实例

<style>
    p.none {border-style: none;}
    p.dotted {border-style: dotted;}
    p.dashed {border-style: dashed;}
    p.solid {border-style: solid;}
    p.double {border-style: double;}
    p.groove {border-style: groove;}
    p.ridge {border-style: ridge;}
    p.inset {border-style: inset;}
    p.outset {border-style: outset;}
    p.hidden {border-style: hidden;}
</style>

<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>

效果

无边框。

虚线边框。

虚线边框。

实线边框。

双边框。

凹槽边框。

垄状边框。

嵌入边框。

外凸边框。

隐藏边框。

3、宽度

border-width 属性设置一个元素的四个边框的宽度。

属性	描述	CSS	🔗
border-width	指定表格边框的宽度	1	🔗

border-top-width	设置元素的上边框的宽度	1	🔗
border-right-width	设置元素的右边框的宽度	1	🔗
border-bottom-width	设置元素的下边框的宽度	1	🔗
border-left-width	设置元素的左边框的宽度	1	🔗

属性值

值	描述
thin	定义细的边框
medium	默认。定义中等的边框
thick	定义粗的边框
length	允许您自定义边框的宽度
inherit	规定应该从父元素继承边框宽度

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em（单位为 px, pt, cm, em 等），或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。
CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。
border-width 属性可以有一到四个值。
- border-width: thin medium thick 10px;
  - 上边框是细边框
  - 右边框是中等边框
  - 下边框是粗边框
  - 左边框是 10px 宽的边框
- border-width: thin medium thick;
  - 上边框是细边框
  - 右边框和左边框是中等边框
  - 下边框是粗边框
- border-width: thin medium;
  - 上边框和下边框是细边框
  - 右边框和左边框是中等边框
- border-width: thin;
  - 所有 4 个边框都是细边框
border-width 属性如果单独使用则不起作用。要先使用 border-style 属性来设置边框。

实例

<style>
    p.one {
        border-style: solid;
        border-width: thick;
    }
    p.two {
        border-style: solid;
        border-width: medium;
    }
    p.three {
        border-style: solid;
        border-width: thin;
    }
    p.four {
        border-style: solid;
        border-width: 1px;
    }
</style>

<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p class="four">一些文本。</p>

效果

一些文本。

一些文本。

一些文本。

一些文本。

4、颜色

border-color 属性设置一个元素的四个边框颜色。

属性	描述	CSS	🔗
border-color	指定表格边框的颜色	1	🔗

border-top-color	设置元素的上边框的颜色	1	🔗
border-right-color	设置元素的右边框的颜色	1	🔗
border-bottom-color	设置元素的下边框的颜色	1	🔗
border-left-color	设置元素的左边框的颜色	1	🔗

属性值

值	描述
color	指定背景颜色。在 CSS 颜色值查找颜色值的完整列表
transparent	指定边框的颜色应该是透明的。这是默认
inherit	指定边框的颜色，应该从父元素继承

color 可以设置的颜色：
- name：指定颜色的名称，如 “red”
- RGB：指定 RGB 值, 如 “rgb(255, 0, 0)”
- Hex：指定 16 进制值, 如 “#ff0000”
border-color 属性可以有一到四个值。
- border-color: 红，绿，蓝, 粉红色;
  - 上边框是红色
  - 右边框是绿色
  - 底部边框是蓝
  - 左边框是粉红色
- border-color: 红，绿，蓝;
  - 上边框是红色
  - 左，右边框是绿色
  - 底部边框是蓝
- border-color: 红，绿;
  - 顶部和底部边框是红色
  - 左右边框是绿色
- border-color: 红色;
  - 所有四个边框是红色
border-color 属性如果单独使用则不起作用。要先使用 border-style 属性来设置边框。

实例

<style>
    p.one {
        border-style: solid;
        border-color: #0000ff;
    }
    p.two {
        border-style: solid;
        border-color: #ff0000 #0000ff;
    }
    p.three {
        border-style: solid;
        border-color: #ff0000 #00ff00 #0000ff;
    }
    p.four {
        border-style: solid;
        border-color: #ff0000 #00ff00 #0000ff rgb(0, 0, 0);
    }
</style>

<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>

效果

One-colored border!

Two-colored border!

Three-colored border!

Four-colored border!

5、边界图片

有了 CSS3 的 border-image 属性，可以使用图像创建一个边框。border-image 属性允许你指定一个图片作为边框。
注意: Internet Explorer 不支持 border-image 属性。

属性	描述	CSS	备注	🔗
border-image	设置所有边框图像的速记属性	3		🔗

属性值

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）

属性值

source 值	描述
none	没有图像被使用
image	边框使用图像的路径

slice 值	描述
number	数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像）
%	百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度
fill	保留图像的中间部分

width 值	描述
number	表示相应的 border-width 的倍数
%	边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积
auto	如果指定了，宽度是相应的 image slice 的内在宽度或高度

outset 值	描述
length	设置边框图像与边框（border-image）的距离，默认为 0
number	代表相应的 border-width 的倍数

repeat 值	描述
stretch	拉伸，默认值。拉伸图像来填充区域
repeat	重复，平铺（repeated）图像来填充区域
round	铺满，类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域
space	类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围
initial	将此属性设置为默认值
inherit	从父元素中继承该属性

在 div 中使用创建边框的图片。

实例

<style>
    div {
        border: 15px solid transparent;
        width: 300px;
        padding: 10px 20px;
    }
    #round {
        border-image: url(https://demo.qianchia.com/media/image/demo/demo18.png) 30 30 round;
        -o-border-image: url(https://demo.qianchia.com/media/image/demo/demo18.png) 30 30 round;       /* Opera */
        -webkit-border-image: url(https://demo.qianchia.com/media/image/demo/demo18.png) 30 30 round;  /* Safari 5 and older */
    }
    #stretch {
        border-image: url(https://demo.qianchia.com/media/image/demo/demo18.png) 30 30 stretch;
        -o-border-image: url(https://demo.qianchia.com/media/image/demo/demo18.png) 30 30 stretch;      /* Opera */
        -webkit-border-image: url(https://demo.qianchia.com/media/image/demo/demo18.png) 30 30 stretch; /* Safari 5 and older */
    }
</style>

1 2	<div id="round">这里，图像平铺（重复）来填充该区域。</div> <div id="stretch">这里，图像被拉伸以填充该区域。</div>

效果

这里，图像平铺（重复）来填充该区域。

这里，图像被拉伸以填充该区域。

6、盒阴影

CSS3 中的 box-shadow 属性被用来添加阴影。

属性	描述	CSS	备注	🔗
box-shadow	附加一个或多个下拉框的阴影	3		🔗

属性值

值	描述
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

实例

<style>
    div {
        width: 300px;
        height: 100px;
        background-color: yellow;
        
        box-shadow: 10px 10px 5px #888888;
    }
</style>

1	<div></div>

效果

7、圆角

使用 CSS3 border-radius 属性，可以给任何元素制作 “圆角”。
在 CSS2 中添加圆角棘手。不得不在每个角落使用不同的图像。
在 CSS3 中，很容易创建圆角。在 CSS3 中 border-radius 属性被用于创建圆角。

属性	描述	CSS	备注	🔗
border-radius	所有四个边角 border---radius 属性的缩写	3		🔗

属性值

值	描述
length	定义弯道的形状
%	使用 % 定义角落的形状

实例

<style>
    #rcorners1 {
        border-radius: 25px;
        background: #8AC007;

        padding: 20px;
        width: 200px;
        height: 150px;
    }
    #rcorners2 {
        border-radius: 25px;
        border: 2px solid #8AC007;

        padding: 20px;
        width: 200px;
        height: 150px;
    }
    #rcorners3 {
        border-radius: 25px;
        background: url(https://demo.qianchia.com/media/image/demo/demo19.png);
        background-position: left top;
        background-repeat: repeat;

        padding: 20px;
        width: 200px;
        height: 150px;
    }
</style>

<p> border-radius 属性允许向元素添加圆角。</p>
<p>指定背景颜色元素的圆角:</p>
<p id="rcorners1">圆角</p>
<p>指定边框元素的圆角:</p>
<p id="rcorners2">圆角</p>
<p>指定背景图片元素的圆角:</p>
<p id="rcorners3">圆角</p>

效果

border-radius 属性允许向元素添加圆角。

指定背景颜色元素的圆角:

圆角

指定边框元素的圆角:

圆角

指定背景图片元素的圆角:

圆角

7.1 指定每个圆角

如果在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

属性	描述	CSS	🔗
border-radius	所有四个边角 border---radius 属性的缩写	3	🔗
border-top-left-radius	定义了左上角的弧度	3	🔗
border-top-right-radius	定义了右上角的弧度	3	🔗
border-bottom-right-radius	定义了右下角的弧度	3	🔗
border-bottom-left-radius	定义了左下角的弧度	3	🔗

属性值

值	描述
length	定义弯道的形状
%	使用 % 定义角落的形状

如果要在四个角上一一指定，可以使用以下规则：
- 四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值：第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值：第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值：四个圆角值相同

实例

<style>
    #rcorners4 {
        border-radius: 15px 50px 30px 5px;
        
        background: #8AC007;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
    #rcorners5 {
        border-radius: 15px 50px 30px;
        
        background: #8AC007;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
    #rcorners6 {
        border-radius: 15px 50px;
        
        background: #8AC007;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
</style>

<p>四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>

<p>三个值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>

<p>两个值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>

效果

四个值 - border-radius: 15px 50px 30px 5px:

三个值 - border-radius: 15px 50px 30px:

两个值 - border-radius: 15px 50px:

7.2 椭圆边角

还可以创建椭圆边角。

实例

<style>
    #rcorners7 {
        border-radius: 50px/15px;
        
        background: #8AC007;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
    #rcorners8 {
        border-radius: 15px/50px;
        
        background: #8AC007;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
    #rcorners9 {
        border-radius: 50%;
        
        background: #8AC007;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
</style>

<p>椭圆边框 - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>

<p> 椭圆边框 - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>

<p>椭圆边框 - border-radius: 50%:</p>
<p id="rcorners9"></p>

效果

椭圆边框 - border-radius: 50px/15px:

椭圆边框 - border-radius: 15px/50px:

椭圆边框 - border-radius: 50%:

7.3 border-radius: 50% 和 100% 的区别

border-radius 的值如果为百分比，则为盒子的宽度与高度的比值。所以当值为 50% 的时候正好是直径为盒子长度的圆。那当 border-radius 为 100% 的时候，直径应该为两倍的边长，那为什么最终效果是和 50% 的时候的长度是一样的呢？
其实在 W3C 中，如果两个相邻角的半径之和超过了相应盒子边的长度，那么浏览器要重新计算，以保证两者不会重合。
假设有一个 100px 的盒子，若 border-top-left-radius:100%; 则盒子会变成一个半径为 100px 的 1/4圆。（如下图左）
这个时候，如果我们再给一个 border-top-right-radius:100%; 此时相邻的两个角的半径之和已经超过了盒子的长度，浏览器需要重新计算。计算的规则就是同时缩放两个圆角的半径，直至两个相邻角的半径和为盒子的长度。也就是说，当两个圆角的半径为 50% 的时候，圆角正好符合 W3C 标准。（下图右）