CSS 边框样式border-style，常见的十一种

边框样式

HTML元素的边框样式，除了可以在border属性中添加，也可以通过border-sytle属性来添加，其中常见的样式可以有十一种方式，如下表（具体的样式见下方的实例代码——通过在线运行可见）：

边框样式值	描述
solid	实线边框
dashed	虚线边框
dotted	点线边框
double	双线边框
groove	3d坡口边框，效果取决于边框颜色
ridge	3d脊线边框，效果取决于边框颜色
inset	3d inset边框，效果取决于边框颜色
outset	3d outset边框，效果取决于边框颜色
none	无边框
hidden	隐藏边框
混合值	混合边框

CSS边框样式实例代码，及在线编辑器

<p class='e1'>实线边框solid</p>
<p class='e2'>虚线边框dashed</p>
<p class='e3'>点线边框dotted</p>
<p class='e4'>双线边框double</p>
<p class='e5'>3d坡口边框groove</p>
<p class='e6'>3d脊线边框ridge</p>
<p class='e7'>3d inset边框</p>
<p class='e8'>3d outset边框</p>
<p class='e9'>无边框none</p>
<p class='e10'>隐藏边框hidden</p>
<p class='e11'>混合边框</p>

<style>
  .e1{border-style:solid}
  .e2{border-style:dashed}
  .e3{border-style:dotted}
  .e4{border-style:double}
  .e5{border-style:groove}
  .e6{border-style:ridge}
  .e7{border-style:inset}
  .e8{border-style:outset}
  .e9{border-style:none}
  .e10{border-style:hidden}
  .e11{border-style:solid dashed dotted double}
</style>

试一试