目录
  1. WIKI教程
  2. 学习CSS
  3. border-style

border-style

描述 (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>

这将产生以下结果 -

新页面打开
↑回到顶部↑
WIKI教程 @2018