CSS 边框各边

在这里插入图片描述

它的工作原理是这样的：
如果 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>
<style>
body {
     
     
  text-align: center;
}
/* 四个值 */
p.four {
     
     
  border-style: dotted solid double dashed;
}

/* 三个值 */
p.three {
     
     
  border-style: dotted solid double;
}

/* 两个值 */
p.two {
     
     
  border-style: dotted solid;
}

/* 一个值 */
p.one {
     
     
  border-style: dotted;
}
</style>
</head>
<body>

<h1>单独的边框</h1>

<p class="four">四种不同的边框样式。</p>
<p class="three">三种不同的边框样式。</p>
<p class="two">两种不同的边框样式。</p>
<p class="one">一种边框样式。</p>

</body>
</html>

在这里插入图片描述

CSS 边框各边

CSS 边框各边

猜你喜欢