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

最新推荐文章于 2025-05-22 09:48:36 发布

原创

最新推荐文章于 2025-05-22 09:48:36 发布 · 767 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#css

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>