CSS border-width 屬性使用教程
2024-07-11 08:45:02
供稿：網(wǎng)友
border-width -- 定義四個(gè)邊框的寬度
取值:<border-width>{1,4} | inherit
<border-width>{1,4}: 邊框?qū)挾?可以有一個(gè),兩個(gè),三個(gè)或四個(gè)值)
inherit:繼承
初始值: medium
繼承性: 否
適用于: 所有元素
border:邊框,width:寬度.
border-width的取值
thin: 細(xì)
medium: 中
thick: 粗
<length>: 長度表示法
上面的寬度值有下面的關(guān)系: thin<medium<thick
提示: border-width不能使用百分比而且不能取負(fù)值,只能使用長度.(例如:px,em等)!
示例
為border-width指定四個(gè)值
border-width:border-top-width border-right-width border-bottom-width border-left-width;
p#fourborders
{
border-width:thick medium thin 12px;
}
如果定義四個(gè)值,那么這四個(gè)值就分別是上,右,下,左邊框的寬度值(從上邊框開始,以順時(shí)針的順序遍歷).
等價(jià)于下面的定義
p#fourborders
{
border-top-width:thick;
border-right-width:medium;
border-bottom-width:thin;
border-left-width:12px;
}
為border-width指定三個(gè)值
border-width:border-top-width border-right-width/border-left-width border-bottom-width;
p#threeborders
{
border-width:thick 12px thin;
}
如果只定義三個(gè)值,中間的值代表左和右邊框的寬度.
等價(jià)于下面的定義
p#threeborders
{
border-top-width:thick;
border-right-width:12px;
border-bottom-width:thin;
border-left-width:12px;
}
為border-width指定兩個(gè)值
border-width:border-top-width/border-bottom-width border-right-width/border-left-width;
p#twoborders
{
border-width:thick 12px;
}
如果只定義兩個(gè)值,前面的值代表上下邊框?qū)挾?后面的值代表左右邊框的寬度.
等價(jià)于下面的定義
p#twoborders
{
border-top-width:thick;
border-right-width:12px;
border-bottom-width:thick;
border-left-width:12px;
}
為border-width指定一個(gè)值
border-width:border-top-width/border-bottom-width/border-right-width/border-left-width;
p#oneborders
{
border-width:thick;
}
如果只定義一個(gè)值,這個(gè)值就代表四個(gè)邊的寬度.
等價(jià)于下面的定義
p#oneborders
{
border-top-width:thick;
border-right-width:thick;
border-bottom-width:thick;
border-left-width:thick;
}
