CSS border-width 属性
CSS border-width 属性
CSS 的 border-width 属性用于定义一个 HTML 元素的边框宽度,它可以为元素的每条边(上、右、下、左)设置不同的边框宽度,或者使用一个值为所有边框设置相同的边框宽度。
语法
border-width: value;
value 可以是以下几种值之一:
- 一个数字,例如
5px
,表示该元素的所有边框均为这个宽度。 - 四个数字,例如
5px 10px 5px 10px
,表示元素的上右下左四个边框的宽度分别为5px 10px 5px 10px
,以顺时针方向依次对应。 - 三个数字,例如
5px 10px 5px
,表示上下两个边框的宽度为第一个数字,左右两个边框的宽度为第二个数字。 - 两个数字,例如
5px 10px
,表示上下两个边框的宽度为第一个数字,左右两个边框的宽度为第二个数字。 - 一个关键字,例如
thin
,表示使用内置的宽度。 - inherit,表示从父元素继承边框宽度。
实例
.border {
border-width: 5px;
}
.border-top {
border-top-width: 10px;
}
.border-right {
border-right-width: 15px;
}
.border-bottom {
border-bottom-width: 20px;
}
.border-left {
border-left-width: 25px;
}
.border-all {
border-width: 5px 10px 15px 20px;
}
.border-vertical {
border-width: 5px 0;
}
.border-horizontal {
border-width: 0 10px;
}
.border-thin {
border-width: thin;
}
.border-inherit {
border-width: inherit;
}
默认值
如果未设置 border-width 属性,其默认值为 medium
,具体宽度取决于浏览器。
注意事项
- border-width 属性只能用于实线边框。
- 如果边框宽度为 0,应使用
border: none;
或border-width: 0;
而非border-width: 0px;
。 - 除非需要针对每条边单独设置不同宽度的边框,否则应使用
border-width
快捷属性而非border-top-width
、border-right-width
、border-bottom-width
和border-left-width
单独设置每条边框的宽度。
总结
CSS 的 border-width 属性可用于设置 HTML 元素的边框宽度,通过简单设置一个值或多个值来定义每条边框的宽度。在实践中,我们可以根据实际需要使用此属性来美化网页并进行排版。