CSS 边框 - 单边

CSS 边框 - 单边

从前几页的示例中，您已经看到可以指定 每边都有不同的边框。

在 CSS 中，还有一些属性用于指定每个边框（上、右、下、左）：

p {  border-top-style: dotted;  
  border-right-style: solid;  
  border-bottom-style: dotted;  
  border-left-style: solid;}

尝试一下 »

结果：

上面的示例给出了与此相同的结果：

p {  border-style: dotted solid;}

尝试一下 »

因此，这是它的工作原理：

如果该属性有四个值：border-style

• 边框样式：虚线实心双虚线;
  • 顶部边框为虚线
  • 右边框是实心的
  • 底部边框是双边框
  • 左边框为虚线

如果该属性有三个值：border-style

• 边框样式：虚线实心双;
  • 顶部边框为虚线
  • 左右边框是实心的
  • 底部边框是双边框

如果该属性有两个值：border-style

• 边框样式：虚线实心;
  • 顶部和底部边框为虚线
  • 左右边框是实心的

如果属性有一个值：border-style

• 边框样式：虚线;
  • 所有四个边框都虚线

/* Four values */  
p {  border-style: dotted solid double dashed;}  

/* Three values */  
p {  border-style: dotted solid double;}  

/* Two values */  
p {  border-style: dotted solid;}  

/* One value */  
p {  border-style: dotted;}

尝试一下 »

border-style属性在上面的示例中使用。但是，它也适用于border-width 和 border-color。