📅 最后修改于: 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 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.
它将产生以下结果-