CSS 属性

border-width 是一个简写属性，用于设置元素四个边框边的宽度。

属性值

  • length: 任何长度单位。此属性的长度单位不能为负。

  • thin: 细边框，比设置为中等的边框更细的边框。

  • medium: 中等边框，比设置为薄的边框更厚的边框，比设置为厚的边框更薄的边框。

  • thick: 粗边框，比设置的边框更厚的边框到中等。

适用范围

所有 HTML 元素。

DOM 语法

object.style.borderWidth = "2px"; 

始终在 border-width 属性之前声明 border-style 属性。

示例

以下是显示所有边框宽度的示例 -

<html>
<head>
</head>

   <body>
      <p style = "border-width:4px; border-style:solid;">
         这是一个宽度为 4px 的实心边框。
      </p>

      <p style = "border-width:4pt; border-style:solid;">
         这是一个宽度为 4pt 的实心边框。
      </p>

      <p style = "border-width:thin; border-style:solid;">
         这是一个宽度较细的实心边框。
      </p>

      <p style = "border-width:medium; border-style:solid;">
         这是一个实心边框，宽度中等；
      </p>

      <p style = "border-width:thick; border-style:solid;">
         这是一个宽度较厚的实心边框。
      </p>

      <p style = "border-bottom-width:4px;border-top-width:10px;
         border-left-width: 2px;border-right-width:15px;border-style:solid;">
         这是一个有四种不同宽度的边框。
      </p>

   </body>
</html>

边框宽度: 简写

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

<html>
   <head>
      <style type = "text/css">
         p.example1 {
            border-width:4px 3px 2px 1px;
            border-style:solid;
         }
         p.example2 {
           border-width:4px 3px 2px ;
           border-style:solid;
         }
         p.example3 {
           border-width:4px 3px;
           border-style:solid;
         }
         p.example4 {
           border-width:4px;
           border-style:solid;
         }
      </style>
   </head>

   <body>
      <p class = "example1">
         <i>border-width</i> 有4个不同的值。
      </p>
      <p class = "example2">
         <i>border-width</i> 有3个不同的值。
      </p>
      <p class = "example3">
         <i>border-width</i> 有2个不同的值。
      </p>
      <p class = "example4">
         <i>border-width</i> 有1个值。
      </p>
   </body>
</html>