CSS Border 边框

前言

  • CSS 边框属性允许你指定一个元素边框的样式和颜色。
属性 描述 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 🔗

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、CSS 实例

文章目录
  1. 1. 前言
  2. 2. 1、简写属性
  3. 3. 2、样式
  4. 4. 3、宽度
  5. 5. 4、颜色
  6. 6. 5、CSS 实例
隐藏目录