定义和用法
border-width 简写属性为元素的所有框线设定宽度，或者单独地为各边框线设定宽度。
只有当框线样式不是 none 时才起作用。如果框线样式是 none，框线宽度实际上会重置为 0。不允许指定负长度值。
border-width:thin medium thick 10px;
- 上框线是细框线
- 右框线是中等框线
- 下框线是粗框线
- 左框线是 10px 宽的框线
border-width:thin medium thick;
- 上框线是 10px
- 右框线和左框线是中等框线
- 下框线是粗框线
border-width:thin medium;
- 上框线和下框线是细框线
- 右框线和左框线是中等框线
border-width:thin;
- 所有 4 个框线都是细框线
| 默认值： | medium |
|---|---|
| 继承性： | no |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.borderWidth="thin thick" |
设定四个框线的宽度：
p { border-style:solid;border-width:15px;}
浏览器支持
所有浏览器都支持 border-width 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
可能的值
| 值 | 描述 |
|---|---|
thin | 定义细的框线。 |
medium | 默认。定义中等的框线。 |
thick | 定义粗的框线。 |
length | 允许您自定义框线的宽度。 |
inherit | 规定应该从父元素继承框线宽度。 |
TIY 实例
所有框线宽度属性在一个声明之中
本例演示用简写属性来将所有框线宽度属性设定于同一声明中。
<html>
<head>
<style type="text/css">
p.one
{
border-style: solid;
border-width: 5px
}
p.two
{
border-style: solid;
border-width: thick
}
p.three
{
border-style: solid;
border-width: 5px 10px
}
p.four
{
border-style: solid;
border-width: 5px 10px 1px
}
p.five
{
border-style: solid;
border-width: 5px 10px 1px medium
}
</style>
</head>
<body>
<p class="one">Some text</p>
<p class="two">Some text</p>
<p class="three">Some text</p>
<p class="four">Some text</p>
<p class="five">Some text</p>
<p><b>注释：</b>"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设定框线。</p>
</body>
</html>