📜  CSS-边框

📅  最后修改于: 2020-10-26 04:46:08             🧑  作者: Mango


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

  • border-color指定边框的颜色

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

  • border-width指定边框的宽度

现在,我们将通过示例了解如何使用这些属性。

边框颜色属性

border-color属性使您可以更改元素周围边框的颜色。您可以使用属性分别更改元素边框的底部,左侧,顶部和右侧的颜色-

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

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

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

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

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


   

   
      

This example is showing all borders in different colors.

This example is showing all borders in green color only.

它将产生以下结果-

边界式物业

border-style属性可让您选择以下边框样式之一-

  • -无边框。 (等效于border-width:0;)

  • 实线-边框是一条实线。

  • 点状-边框是一系列点。

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

  • double-边框是两条实线。

  • 凹槽-边框看起来像刻在页面上一样。

  • -边框看起来与凹槽相反。

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

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

  • 隐藏的-除了在表格元素的边界冲突解决方面,其他都没有。

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

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

它将产生以下结果-

边框宽度属性

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

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

This example is showing shorthand property for border.

它将产生以下结果-