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; 是允许的。

  • 实例

    1
    2
    3
    4
    5
    <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个边框都是点状
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <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>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <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 属性来设置边框。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <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>
    1
    2
    3
    4
    <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 属性来设置边框。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <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>
    1
    2
    3
    4
    <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 中使用创建边框的图片。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <style>
    div {
    border: 15px solid transparent;
    width: 300px;
    padding: 10px 20px;
    }
    #round {
    border-image: url(https://demo.qianchia.com/media/image/demo18.png) 30 30 round;
    -o-border-image: url(https://demo.qianchia.com/media/image/demo18.png) 30 30 round; /* Opera */
    -webkit-border-image: url(https://demo.qianchia.com/media/image/demo18.png) 30 30 round; /* Safari 5 and older */
    }
    #stretch {
    border-image: url(https://demo.qianchia.com/media/image/demo18.png) 30 30 stretch;
    -o-border-image: url(https://demo.qianchia.com/media/image/demo18.png) 30 30 stretch; /* Opera */
    -webkit-border-image: url(https://demo.qianchia.com/media/image/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 可选。从外层的阴影(开始时)改变阴影内侧阴影
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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 定义弯道的形状
% 使用 % 定义角落的形状
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <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/demo19.png);
    background-position: left top;
    background-repeat: repeat;

    padding: 20px;
    width: 200px;
    height: 150px;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <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 定义弯道的形状
% 使用 % 定义角落的形状
  • 如果要在四个角上一一指定,可以使用以下规则:

    • 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
    • 三个值:第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
    • 两个值:第一个值为左上角与右下角,第二个值为右上角与左下角
    • 一个值:四个圆角值相同
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <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>
    1
    2
    3
    4
    5
    6
    7
    8
    <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 椭圆边角

  • 还可以创建椭圆边角。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <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>
    1
    2
    3
    4
    5
    6
    7
    8
    <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 标准。(下图右)

7.4 浏览器支持

属性
border-radius 5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5
  • 表格中的数字表示支持该属性的第一个浏览器版本号。
  • 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

8、CSS 实例

文章目录
  1. 1. 前言
  2. 2. 1、简写属性
  3. 3. 2、样式
  4. 4. 3、宽度
  5. 5. 4、颜色
  6. 6. 5、边界图片
  7. 7. 6、盒阴影
  8. 8. 7、圆角
    1. 8.1. 7.1 指定每个圆角
    2. 8.2. 7.2 椭圆边角
    3. 8.3. 7.3 border-radius: 50% 和 100% 的区别
    4. 8.4. 7.4 浏览器支持
  9. 9. 8、CSS 实例
隐藏目录