border-style

优质

小牛编辑

132浏览

2023-12-01

描述 (Description)

border-style属性允许您选择以下边框样式之一 -

none - 没有边界。（相当于border-width:0;）
solid - Border是一条实线。
dotted - 边框是一系列点。
dashed - 边界是一系列短线。
double - Border是两条实线。
groove - 边框看起来好像刻在页面上。
ridge - 边框看起来与沟槽相反。
inset - 边框使框看起来像嵌入在页面中。
outset - 边框使框看起来像是从画布中出来的。
hidden - 与none无关，除了表元素的边界冲突解决方案。

您可以使用以下属性单独更改元素的底部，左侧，顶部和右侧边框的样式 -

border-bottom-style - 更改底部边框的样式。
border-top-style - 更改顶部边框的样式。
border-left-style - 更改左边框的样式。
border-right-style - 改变右边框的样式。

可能的值 (Possible Values)

上面定义的任何值。

适用于 (Applies to)

所有HTML元素。

DOM语法 (DOM Syntax)

object.style.borderStyle = "Any of the values defined above";

例子 (Example)

以下是显示所有这些边框样式的示例 -

<html>
   <head>
   </head>
   <body>
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>
      <p style = "border-width:4px; border-style:ridge">
         This is a ridge  border.
      </p>
      <p style = "border-width:4px; border-style:inset;">
         This is a inset border.
      </p>
      <p style = "border-width:4px; border-style:outset;">
         This is a outset border.
      </p>
      <p style = "border-width:4px; border-style:hidden;">
         This is a hidden border.
      </p>
      <p style = "border-width:4px; 
         border-top-style:solid;
         border-bottom-style:dashed;
         border-left-style:groove;
         border-right-style:double;">
         This is a a border with four different styles.
      </p>
   </body>
</html>

这将产生以下结果 -