首頁  >  文章  >  web前端  >  CSS border-width 屬性使用教學課程

CSS border-width 屬性使用教學課程

巴扎黑
巴扎黑原創
2017-06-28 14:07:412021瀏覽

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

以上是CSS border-width 屬性使用教學課程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn