CSS border-width 屬性使用教程

border-width -- 定義四個邊框的寬度 取值:<border-width>{1,4} | inherit <border-width>{1,4}: 邊框寬度(可以有一個,兩個,三個或四個值) inherit:繼承 初始值: medium 繼承性: 否 適用於: 所有元素 border:邊框,width:寬度. border-width的取值 thin:border-width -- 定義四個邊框的寬度
取值:<border-width>{1,4} | inherit
<border-width>{1,4}: 邊框寬度(可以有一個,兩個,三個或四個值)
inherit:繼承
初始值: medium
繼承性: 否
適用於: 所有元素
border:邊框,width:寬度.
border-width的取值
thin: 細
medium: 中
thick: 粗
<length>: 長度標記法
上面的寬度值有下面的關係: thin<medium<thick

提示: border-width不能使用百分比而且不能取負值,只能使用長度.(例如:px,em等)!

樣本
為border-width指定四個值
border-width:border-top-width border-right-width border-bottom-width border-left-width;
p#fourborders
{
border-width:thick medium thin 12px;
}
如果定義四個值,那麼這四個值就分別是上,右,下,左邊框的寬度值(從上邊框開始,以順時針的順序遍曆).

等價於下面的定義

p#fourborders
{
border-top-width:thick;
border-right-width:medium;
border-bottom-width:thin;
border-left-width:12px;
}
為border-width指定三個值
border-width:border-top-width border-right-width/border-left-width border-bottom-width;
p#threeborders
{
border-width:thick 12px thin;
}
如果只定義三個值,中間的值代表左和右邊框的寬度.

等價於下面的定義

p#threeborders
{
border-top-width:thick;
border-right-width:12px;
border-bottom-width:thin;
border-left-width:12px;
}
為border-width指定兩個值
border-width:border-top-width/border-bottom-width border-right-width/border-left-width;
p#twoborders
{
border-width:thick 12px;
}
如果只定義兩個值,前面的值代表上下邊框寬度,後面的值代表左右邊框的寬度.

等價於下面的定義

p#twoborders
{
border-top-width:thick;
border-right-width:12px;
border-bottom-width:thick;
border-left-width:12px;
}
為border-width指定一個值
border-width:border-top-width/border-bottom-width/border-right-width/border-left-width;
p#oneborders
{
border-width:thick;
}
如果只定義一個值,這個值就代表四個邊的寬度.

等價於下面的定義

p#oneborders
{
border-top-width:thick;
border-right-width:thick;
border-bottom-width:thick;
border-left-width:thick;
}