css

CSS 边框-每条边不同样式

下文笔者讲述CSS边框中为每天边设置不同样式的方法分享，如下所示

CSS各边设置不同的样式

  设置不同边的样式
    border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;

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;
   四条边均为虚线

例:CSS样式设置边样式的示例

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>CSS单边样式-linux28.com</title>
  <style>
/* 四个值 */
p.one {
  border-style: dotted solid double dashed; 
}

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

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

/* 一个值 */
p.four {
  border-style: dotted; 
}

p{
  width:180px;
  height:100px;
  margin:10px;
}
  </style>
 </head>
 <body>
<p class="one"> linux28.com单边样式</p>
<p class="two"></p>
<p class="three"></p>
<p class="four"></p>
  </body>
</html>

CSS 边框颜色