HTML | DOM 样式 borderStyle 属性

简介

borderStyle 属性用于设置 HTML 元素的边框样式。

语法

<style>
  element {
    border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
  }
</style>

属性值

• none：无边框。
• hidden：边框被隐藏。
• dotted：点状边框。
• dashed：虚线边框。
• solid：实线边框。
• double：双边框。
• groove：3D沟槽边框。
• ridge：3D脊边框。
• inset：3D凹边框。
• outset：3D凸边框。
• initial：使用默认值。
• inherit：从父元素继承值。

实例

<style>
  /* 实线边框 */
  #solid {
    border-style: solid;
  }

  /* 虚线边框 */
  #dashed {
    border-style: dashed;
  }

  /* 点状边框 */
  #dotted {
    border-style: dotted;
  }

  /* 双边框 */
  #double {
    border-style: double;
  }

  /* 3D脊边框 */
  #ridge {
    border-style: ridge;
  }
</style>

<div id="solid">实线边框</div>
<div id="dashed">虚线边框</div>
<div id="dotted">点状边框</div>
<div id="double">双边框</div>
<div id="ridge">3D脊边框</div>

输出：

总结

borderStyle 属性是 HTML | DOM 样式的其中之一，用于设置 HTML 元素的边框样式。有多种值可供选择，包括实线边框、虚线边框、点状边框等等。程序员可以根据不同的使用场景进行设置，以达到最佳的视觉效果。