CSS边框


CSS边框属性

CSS边框属性允许你指定边框的样式,宽度,和颜色。

每个边都有边框

底部红色边框

我有一个圆角边框

我有一个蓝色左边框


边框样式

border-style 属性指定要显示的边框类型.

允许以下值::

  • dotted - 定义了一个点边框
  • dashed - 定义一个虚线边框
  • solid - 定义了一个实线边界
  • double - 定义了一个双边框
  • groove - 定义了一个三维有槽的边界. 效果取决于边框颜色border-color值.
  • ridge - 定义一个三维凸起边框. 效果取决于边框颜色border-color值.
  • inset - 定义一个三维凹陷边框. 效果取决于边框颜色border-color值.
  • outset - 定义一个三维外突边框. 效果取决于边框颜色border-color值.
  • none - 没有边框
  • hidden - 隐藏边框

border-style 属性可以从一到四个值(顶边框, 右边框, 底边框和左边框).

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.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

让我试试

注意: 他的CSS边框属性下面的描述都会有何影响除非边框样式属性设置!


边框宽度

border-width 属性指定四个边框的宽度.

宽度可以设置为一个特定的尺寸 (in px, pt, cm, em, etc) 或使用三个预定义值中的一个: thin, medium, 或者 thick.

border-width 属性可以从一到四个值 (顶,右,底,左).

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

让我试试


边框颜色

border-color属性用于设置四个边框的颜色..

颜色可以设置:

  • 名称 - 例如: "red"
  • 16进制值 - 例如: "#ff0000"
  • RGB - 例如: "rgb(255,0,0)"
  • 透明度

border-color 属性可以从一到四个值 (顶,右,底,左).

border-color 没有设置,它继承了父元素的颜色。

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}

让我试试


边框 - 单独设置

从上面的示例中,您可以看到为每个边指定一个不同的边框.

在CSS中,也有具体的边框属性(顶,右,底,左).

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

让我试试

上面的例子给出了同样的结果:

p {
    border-style: dotted solid;
}

让我试试

那么,他们是如何工作的呢?

如果 border-style 属性有4个值:

  • border-style: dotted solid double dashed;
    • 顶边框是 dotted
    • 右边框是 solid
    • 底边框是 double
    • 左边框是 dashed

如果 border-style 有三个值:

  • border-style: dotted solid double;
    • 顶边框是 dotted
    • 左右边框是 solid
    • 底边框是 double

如果 border-style 属性有两个值:

  • border-style: dotted solid;
    • 顶底边框是 dotted
    • 左右边框是 solid

如果 border-style 属性有一个值:

  • border-style: dotted;
    • 四个边框都是dotted

上面实例中的border-style 属性. 同样适合 border-widthborder-color.


边框 - 缩写属性

正如你从上面的例子中看到的,在处理边界时有许多属性可以考虑这样处理.

使用简写方式, 也可以在一个属性中指定所有单独的边框属性.

border 属性是下列单个边框属性的简写属性:

  • border-width
  • border-style (必须的)
  • border-color
p {
    border: 5px solid red;
}

让我试试

还可以仅为一个边的指定所有单独边框属性.

左边框

p {
    border-left: 6px solid red;
    background-color: lightgrey;
}

让我试试

底边框

p {
    border-bottom: 6px solid red;
    background-color: lightgrey;
}

让我试试


圆角边框

border-radius 属性用来给元素添加圆角边框:

正常边框

圆角边框

比较圆的圆角边框

最圆的圆角边框

p {
    border: 2px solid red;
    border-radius: 5px;
}

让我试试

注意:border-radius属性不支持IE8及更早版本。


所有的CSS边框属性

属性 描述
border 在一个声明中设置所有边框属性.
border-bottom 在一个声明中设置所有底部边框属性.
border-bottom-color 设置底部边框的颜色
border-bottom-style 设置底部边框的样式
border-bottom-width 设置底部边框的宽度
border-color 设置四个边框的颜色
border-left 在一个声明中设置所有左边框属性.
border-left-color 设置左边框的颜色
border-left-style 设置左边框的样式
border-left-width 设置左边框的宽度
border-radius 设置圆角的所有四个边界半径属性.
border-right 在一个声明中设置所有右边框属性.
border-right-color 设置右边框的颜色
border-right-style 设置右边框的样式
border-right-width 设置右边框的宽度
border-style 设置四个边框的样式
border-top 在一个声明中设置所有顶级边框属性.
border-top-color 设置顶部边框的颜色
border-top-style 设置顶部边框的样式
border-top-width 设置顶部边框的宽度
border-width 设置四个边框的宽度