CSS border

创建时间:2019.07.02 修改时间:2019.07.02

border-style 定义边框的样式

<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;}
</style>

效果如下:

默认无边框。

点线边框。

虚线边框。

实线边框。

双边框。

凹槽边框。

垄状边框。

嵌入边框。

外凸边框。

border-width 定义边框宽度

<style>
p.one
{
	border-style:solid;
	border-width:1px;
}
</style>

效果如下:

边框宽度为 1px 的实线边框。

border-color 定义边框颜色

<style>
p.red
{
	border-style:solid;
	border-color:red;
}
p.green
{
	border-style:solid;
	border-color:#98bf21;
}
</style>

效果如下:

实线红色边框。

实线绿色边框。

单独设置各边样式

<style>
p.four
{
	border-top-style:dotted;
	border-right-style:solid;
	border-bottom-style:double;
	border-left-style:dashed;
}
</style>

效果如下:

四个不同的边界样式。

可简写为:border-style:dotted solid double dashed;

另有:

border-style:dotted solid double;

border-style:dotted solid;

border 定义边框宽度、样式、颜色

p
{
border:1px solid #98bf21;
}

效果如下:

宽度为 1px 的绿色实线边框。

p
{
	border:1px dotted #2196F3;
	border-left:10px solid #2196F3;
}

效果如下:

右侧宽度为 10px 的蓝色实线边框,其余边为点线边框。