CSS 属性

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

  • none: 无边框。 （相当于 border-width:0;）

  • solid: 边框是一条实线。

  • dotted: 边框是一系列点。

  • dashed - 边框是一系列短线，虚线。

  • double: 边框是两条实线线条。

  • groove - 边框看起来好像是刻在页面上的凹槽。

  • ridge - 边框看起来与凹槽相反。

  • inset: 边框使框看起来像是嵌入在页面中。

  • outset: 边框使框看起来像嵌入在页面中。框看起来像是从画布中出来的。

  • hidden: 与无相同，除了表格元素的边框冲突解决方案之外。

您可以使用以下属性单独更改元素的下、左、上、右边框的样式 -

属性值

上面定义的任何值。

适用范围

所有 HTML 元素。

DOM 语法

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

示例

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

<html>
   <head>
   </head>
   <body>
      <p style = "border-width:4px; border-style:none;">
         这是一个没有宽度的边框。
      </p>
      <p style = "border-width:4px; border-style:solid;">
         这是一个实线边界。
      </p>
      <p style = "border-width:4px; border-style:dashed;">
         这是一个虚线边界。
      </p>
      <p style = "border-width:4px; border-style:double;">
         这是一个双边框。
      </p>
      <p style = "border-width:4px; border-style:groove;">
         这是一个凹槽边框。
      </p>
      <p style = "border-width:4px; border-style:ridge">
         这是一个山脊边框
      </p>
      <p style = "border-width:4px; border-style:inset;">
         这是一个inset边框。
      </p>
      <p style = "border-width:4px; border-style:outset;">
         这是一个outset边框。
      </p>
      <p style = "border-width:4px; border-style:hidden;">
         这是一个隐藏的边框。
      </p>
      <p style = "border-width:4px;
         border-top-style:solid;
         border-bottom-style:dashed;
         border-left-style:groove;
         border-right-style:double;">
         元素的所有侧面都有四种不同样式的边框。
      </p>
   </body>
</html>

边框样式: 简写

border-style 属性可以有四个值、三个值、两个值或一个值，如以下示例所示:

<html>
   <head>
      <style type = "text/css">
         p.example1 {
            border:4px solid;
            border-style:dashed double ridge groove;
         }
         p.example2 {
            border:4px solid;
            border-style:dashed double ridge;
         }
         p.example3 {
            border:4px solid;
            border-style:dashed double ;
         }
         p.example4 {
            border:4px solid;
            border-style:dashed;
         }
      </style>
   </head>

   <body>
      <p class = "example1">
         <i>border-style</i> 四个不同的值.
      </p>
      <p class = "example2">
         <i>border-style</i> 三个不同的值.
      </p>
      <p class = "example3">
         <i>border-style</i> 二个不同的值.
      </p>
      <p class = "example4">
         <i>border-style</i> 一个值.
      </p>
   </body>
</html>