css border 边框属性

边框宽度属性border-width用于指定要在网页上显示的边框宽度。

语法

border-width: value

value值用于设置边框的宽度。它的单位是px。

它也可以使用细、中、粗来定义边框的宽度：

thin, medium 和 thick

border-width 属性不能单独使用。它需要与"border-style"等其他边框属性一起使用，以首先设置边框，否则它将不起作用。

多边框定义

当然，一个块级元素有4个边，所以，border-width可以同时设置四个边框的宽度。其语法为

border-width: 上边 [右边 下边 左边];

例如:

{border-width: 1px 3px 3px 3px ;}    /*四个值为上、右、下、左*/
/*或*/
P{border-width: 1px 3px 3px ;}       /*三个值为上、左右、下・/
/*或*/
P{border-width: 1px 3px;}       /*2个值为上下、左右・/

例子

<!DOCTYPE html>
<html>
<title>css 边框宽度 border-width</title>
<head>
<style>
p.one {
    border-style: solid;
    border-width: 5px;
}
p.two {
    border-style: solid;
    border-width: medium;
}
p.three {
    border-style: solid;
    border-width: 1px;
}
</style>
</head>
<body>
<p class="one">在此处写下你的文字</p>
<p class="two">在此处写下你的文字</p>
<p class="three">在此处写下你的文字</p>
</body>
</html>
效果如图所示：

css 边框属性 border

在看一个多边框定义不同宽度的例子

<!DOCTYPE html>
<html>
	<title>css 边框宽度 border-width</title>
<head>
<style>
p.one {
    border-style: solid;
    border-width: 1px 3px 3px 3px ;
}
p.two {
    border-style: solid;
    border-width: 1px 3px 3px  ;
} 
p.thre {
    border-style: solid;
    border-width: 1px 3px   ;
} 
</style>
</head>
<body>
	<h3>yxjc123.com 多边框width定义</h3>
<p class="one">1</p>
<p class="two">2</p>
<p class="thre">3</p>

</body>
</html>
效果如图

css border-width 边框宽度