目录

CSS - Borders

border属性允许您指定表示元素的框的边框应如何显示。 您可以更改边框的三个属性 -

  • border-color指定border-color

  • border-style指定边框是实线,虚线,双线还是其他可能值之一。

  • border-width指定border-width

现在,我们将看到如何将这些属性与示例一起使用。

边框颜色属性

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属性允许您选择以下边框样式之一 -

  • 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改变右边框的样式。

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

<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 or 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属性允许您在一个属性中指定行的颜色,样式和宽度 -

以下示例显示如何将所有三个属性用于单个属性。 这是在任何元素周围设置边框的最常用属性。

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

它会产生以下结果 -

新页面打开
<上一篇.CSS - Tables
CSS - Margins.下一篇>
↑回到顶部↑
WIKI教程 @2018