border-width 是一个简写属性,用于设置元素的四个边框边的宽度。
可能的值
- length − 任何长度单位。此属性的长度单位不能为负数。
- thin − 比设置为中等的边框更薄的边框。
- medium − 比设置为薄的边框厚的边框厚,比设置为厚的边框更薄的边框。
- thick − 比设置为中等的边框更厚的边框。
适用于
所有 HTML 元素。
DOM 语法
object.style.borderWidth = "2px";
始终在 border-width 属性之前声明 border-style 属性。
例
以下是显示所有 border-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-width - 简写示例
border-width 属性可以有四个值、三个值、两个值或一个值,如以下示例所示:
<html>
<head>
<style type = "text/css">
p.example1 {
border-width:4px 3px 2px 1px;
border-style:solid;
}
p.example2 {
border-width:4px 3px 2px ;
border-style:solid;
}
p.example3 {
border-width:4px 3px;
border-style:solid;
}
p.example4 {
border-width:4px;
border-style:solid;
}
</style>
</head>
<body>
<p class = "example1">
<i>border-width</i> with four different values.
</p>
<p class = "example2">
<i>border-width</i> with three different values.
</p>
<p class = "example3">
<i>border-width</i> with two different values.
</p>
<p class = "example4">
<i>border-width</i> with one value.
</p>
</body>
</html>