无涯教程-CSS - 边框(Border)

时间：2024-01-23 20:41:35

border 属性使您可以指定表示元素的边框。您可以更改边框的三个属性-

  • border-color      :  指定边框的颜色。

  • border-style       :  指定边框样式为solid，dashed line，double。

  • border-width     : 指定边框的宽度。

现在，无涯教程将通过示例了解如何使用这些属性。

border-color 属性

border-color属性设置元素的所有边框中可见部分的颜色。

  • border-bottom-color   : 底部边框的颜色。

  • border-top-color          : 顶部边框的颜色。

  • border-left-color          : 左边框的颜色。

  • border-right-color        : 右边框的颜色。

以下示例显示了所有这些属性的效果-

<html>
   <head>
      <style type="text/css">
         p.example1 {
            border:1px solid;
            border-bottom-color:#009900; /* Green */
            border-top-color:#FF0000;    /* Red */
            border-left-color:#330000;   /* Black */
            border-right-color:#0000CC;  /* Blue */
         }
         p.example2 {
            border:1px solid;
            border-color:#009900;        /* Green */
         }
      </style>
   </head>

   <body>
      <p class="example1">
         This example is showing all borders in different colors.
      </p>
      
      <p class="example2">
         This example is showing all borders in green color only.
      </p>
   </body>
</html>

它将产生以下输出-

border-style 属性

border-style属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

  • none      - 无边框。 (相当于border-width:0;)

  • solid      - 边框是一条实线。

  • dotted   - 边框是一系列点。

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

  • double   - 边框是两条实线。

  • groove   - 边框看起来像刻在页面上。

  • ridge      - 边框与凹槽相反。

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

  • outset     - 边框使框看起来像是从画布中出来的。

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

  • border-bottom-style    :  底部边框的样式。

  • border-top-style            :  顶部边框的样式。

  • border-left-style            :  左边框的样式。

  • border-right-style         :  右边框的样式。

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

<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>

它将产生以下输出-

border-width 属性

border-width属性允许您设置元素边框的宽度。此属性的值可以是px，pt或cm的长度，也可以设置为thin，medium或thick。

您可以使用以下属性分别更改元素的底部，顶部，左侧和右侧边框的宽度-

  • border-bottom-width     :  底部边框的宽度。

  • border-top-width            :  顶部边框的宽度。

  • border-left-width            :  左边框的宽度。

  • border-right-width         :  右边框的宽度。

以下示例显示所有这些边框宽度-

<html>
   <head>
   </head>
   
   <body>
      <p style="border-width:4px; border-style:solid;">
         This is a solid border whose width is 4px.
      </p>
      
      <p style="border-width:4pt; border-style:solid;">
         This is a solid border whose width is 4pt.
      </p>
      
      <p style="border-width:thin; border-style:solid;">
         This is a solid border whose width is thin.
      </p>
      
      <p style="border-width:medium; border-style:solid;">
         This is a solid border whose width is medium;
      </p>
      
      <p style="border-width:thick; border-style:solid;">
         This is a solid border whose width is thick.
      </p>
      
      <p style="border-bottom-width:4px;border-top-width:10px;
         border-left-width: 2px;border-right-width:15px;border-style:solid;">
         This is a a border with four different width.
      </p>
   </body>
</html>

它将产生以下输出-

Border 简写属性

border属性可让您在一个属性中指定线条的颜色，样式和宽度-

下面的示例演示如何将所有三个属性都使用为单个属性。这是在任何元素周围设置边框的最常用属性。

<html>
   <head>
   </head>

   <body>
      <p style="border:4px solid red;">
         This example is showing shorthand property for border.
      </p>
   </body>
</html>

它将产生以下输出-

参考链接

https://www.learnfk.com/css/css-borders.html

相关文章