CSS 边框

CSS边框

CSS border属性允许您指定元素边框的样式，宽度和颜色。

我有各方面的边界。

我有一个红色的底边。

我有圆形的边框。

我有一个蓝色的左边框。

边框风格

border-style属性指定要显示的边框类型。允许以下值：

dotted - 定义虚线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义3D凹槽边框。效果取决于边框颜色值
ridge - 定义3D脊状边界。效果取决于边框颜色值
inset - 定义3D嵌入边框。效果取决于边框颜色值
outset - 定义3D开始边框。效果取决于边框颜色值
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;}

尝试一下

注意：除非border-style设置了属性，否则下面描述的其他CSS边框属性都不会产生任何影响！

边框宽度

border-width属性指定四个边框的宽度。宽度可以设置为特定大小（以px，pt，cm，em等为单位）或使用三个预定义值中的一个：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: dotted;
 border-width: 2px;
}

尝试一下

边框颜色

border-color属性用于设置四个边框的颜色。颜色可以通过以下方式设置：

name - 指定颜色名称，如“red”
十六进制 - 指定十六进制值，如“＃ff0000”
RGB - 指定RGB值，例如“rgb（255,0,0）”
transparent(透明)

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属性有四个值： 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-width和border-color。

圆角边界

border-radius属性用于向元素添加圆角边框：

p.normal {
 border: 2px solid red;
}

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

p.round2 {
 border: 2px solid red;
 border-radius: 8px;
}

p.round3 {
 border: 2px solid red;
 border-radius: 12px;
}

尝试一下

注意：border-radiusIE8及更早版本不支持该属性。

所有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	设置四个边框的宽度

CSS边框

边框风格

边框宽度

边框颜色

个别边界

圆角边界

所有CSS边框属性

相关页面