如果 border-style 属性设置四个值：
border-style: dotted solid double dashed;
- 上边框是虚线
- 右边框是实线
- 下边框是双线
- 左边框是虚线
如果 border-style 属性设置三个值：
border-style: dotted solid double;
- 上边框是虚线
- 右和左边框是实线
- 下边框是双线
如果 border-style 属性设置两个值：
border-style: dotted solid;
- 上和下边框是虚线
- 右和左边框是实线
如果 border-style 属性设置一个值：
border-style: dotted;
- 四条边均为虚线
实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单独的边框</title>
<style>
p{
text-align:center;
width:300px;
}
.one{
border-style:dotted solid double dashed;
}
.two{
border-style:dotted solid double ;
}
.three{
border-style:dotted solid ;
}
.four{
border-style:dotted ;
}
</style>
</head>
<body>
<h1>单独的边框</h1>
<p class="one">四种不同的边框样式</p>
<p class="two">三种不同的边框样式</p>
<p class="three">两种不同的边框样式</p>
<p class="four">一种不同的边框样式</p>
</body>
</html>
运行效果：
评论