CSS边框样式使用详细介绍 _CSS

CSS边框属性允许我们设置边框的样式, 颜色和宽度。
注意：
可以为所有不同的边界设置不同的属性, 即顶部边界, 右侧边界, 底部边界和左侧边界。
CSS边框的属性：
边框样式：
border-style属性指定边框的类型。如果未设置边框样式, 则其他边框属性均无法使用。
以下是边框的类型：
* dotted –定义虚线边框
*虚线–定义虚线边框
* solid –定义实线边框
* double-定义一个双边框
*凹槽–定义3D凹槽边框。
* ridge-定义3D脊状边框。
* inset –定义3D插入边框。
* outset –定义3D起始边框。
*无-定义无边框
* hidden –定义隐藏边框
例子：

< !DOCTYPE html> < html > < head > < style > p.dotted { border-style: dotted; }p.dashed { border-style: dashed; }p.solid { border-style: solid; }p.double { border-style: double; } < / style > < / head > < body > < h2 > The border-style Property< / h2 > < p > lsbin< / p > < p class = "dotted" > A dotted border.< / p > < p class = "dashed" > A dashed border.< / p > < p class = "solid" > A solid border.< / p > < p class = "double" > A double border.< / p > < / body > < / html >

【CSS边框样式使用详细介绍】输出如下：

文章图片
边框宽度：
边框宽度设置边框的宽度。边框的宽度可以是px, pt, cm或细, 中, 粗。
例子：

< !DOCTYPE html> < html > < head > < style > p { border-style: solid; border-width: 8px; } < / style > < / head > < body > < p > lsbin< / p > < p > Border properties < / p > < / body > < / html >

输出如下：

文章图片
边框颜色：
此属性用于设置边框的颜色。可以使用颜色名称, 十六进制值或RGB值设置颜色。如果未指定颜色, 则border会继承元素本身的颜色。
例子：

< !DOCTYPE html> < html > < head > < style > p { border-style: solid; border-color: red } < / style > < / head > < body > < p > lsbin< / p > < p > Border properties:color < / p > < / body > < / html >

输出如下：

文章图片
边框各边：
各个侧面可以设置为不同的属性。
语法如下：如果border属性具有4个值, 则。

border-style: solid dashed dotted doubleSolid: top borderDashed: right borderDotted: bottom borderDouble: left border

例子：

< !DOCTYPE html> < html > < head > < style > p { border-style: solid dashed dotted double; border-color: red; } < / style > < / head > < body > < p > lsbin< / p > < p > Border properties:color < / p > < / body > < / html >

输出如下：

文章图片
语法如下：如果border属性具有3个值, 则：

border-style: solid dotted doubleSolid:top borderDotted: Left and right borderDouble: bottom border

例子：

< !DOCTYPE html> < html > < head > < style > p { border-style: solid dashed dotted; border-color: blue; } < / style > < / head > < body > < p > lsbin< / p > < p > Border properties:color < / p > < / body > < / html >

输出如下：

文章图片
语法如下：如果border属性具有2个值

border-style:solid dottedSolid:top and bottom borderDotted: right and left border

例子：

< !DOCTYPE html> < html > < head > < style > p { border-style: solid dashed; border-color: blue; } < / style > < / head > < body > < p > lsbin< / p > < p > Border properties:color < / p > < / body > < / html >

输出如下：

文章图片
语法如下：如果border属性值为1

border-style:dottedDotted:top, bottom, left and right border

例子：

< !DOCTYPE html> < html > < head > < style > p { border-style: solid; border-color: green; } < / style > < / head > < body > < p > lsbin< / p > < p > Border properties:color < / p > < / body > < / html >

输出如下：