CSS 边框边


目录

    显示目录


CSS 边框 - 单独的边

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

在 CSS 中,还有一些属性用于指定每个边框(顶部、 右、下、左):

例子

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

结果 :

Different Border Styles

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>


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

例子

p {	border-style: dotted solid;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: dotted solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>


那么,它的工作原理如下:

如果 class="w3-codespan">border-style 属性有四个值:

  • 边框样式:点实线双虚线;

    • 顶部边框是虚线的

    • 右边框是实心的

    • 底部边框是双边框

    • 左边框是虚线

如果 class="w3-codespan">border-style 属性具有三个值:

  • 边框样式:双点实心;

    • 顶部边框是虚线的

    • 左右边框是实心的

    • 底部边框是双边框

如果 class="w3-codespan">border-style 属性有两个值:

  • 边框样式:点线实线;

    • 顶部和底部边框是点状的

    • 左右边框是实心的

如果 class="w3-codespan">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; 
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  text-align: center;
}
/* Four values */
p.four {
  border-style: dotted solid double dashed;
}

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

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

/* One value */
p.one {
  border-style: dotted;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p class="four">4 different border styles.</p>
<p class="three">3 different border styles.</p>
<p class="two">2 different border styles.</p>
<p class="one">1 border style.</p>

</body>
</html>


上面的示例中使用了 class="w3-codespan">border-style 属性。然而,它也适用于 class="w3-codespan">边框宽度class="w3-codespan">边框颜色