CSS - 边界

border 属性允许您指定表示元素的框的边框应该如何显示.您可以更改和减去边框的三个属性;

• border-color 指定边框的颜色.

• border-style 指定边框应该是实线，虚线，双线还是其中一个可能的值.

• border-width 指定边框的宽度.

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

border-color属性

border-color属性允许您更改元素周围边框的颜色.您可以使用属性 : 来单独更改元素边框的底部，左侧，顶部和右侧的颜色;

• border-bottom-color 更改底部边框的颜色.

• border-top-color 更改顶部边框的颜色.

• border-left-color 更改左边框的颜色.

• border-right-color 更改右边框的颜色.

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

                  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 */         }                           This example is showing all borders in different colors.                           This example is showing all borders in green color only.         

The border-style Property

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

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

solid:边界是一条实线。

dotted :边框是一系列的点。

dashed :边界是一系列短线。

double :边界是两条实线。

groove :边框看起来好像刻在页面上。

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

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

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

hidden :;除了表元素的边界冲突解决方案外，与否相同。

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

border-bottom-style改变底部边框的样式。

border-top-style改变顶部边框的样式。

border-left-style改变左边框的样式。

border-right-style改变右边框的样式。

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

                           This is a border with none width.                           This is a solid border.                           This is a dashed border.                           This is a double border.                           This is a groove border.                           This is a ridge  border.                           This is a inset border.                           This is a outset border.                           This is a hidden border.                           This is a a border with four different styles.         

The border-width Property

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

您可以使用以下属性和减号单独更改元素的底部，顶部，左侧和右侧边框的宽度;

border-bottom-width更改底部边框的宽度。

border-top-width更改顶部边框的宽度。

border-left-width更改左边框的宽度。

border-right-width更改右边框的宽度。

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

                           This is a solid border whose width is 4px.                           This is a solid border whose width is 4pt.                           This is a solid border whose width is thin.                           This is a solid border whose width is medium;                           This is a solid border whose width is thick.                           This is a a border with four different width.         

Border Properties Using Shorthand

border属性允许您在一个属性和减号中指定行的颜色，样式和宽度;

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

                        This example is showing shorthand property for border.