DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS教程:學習border-width屬性
CSS教程:學習border-width屬性
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:border-width:定義四個邊框的寬度.

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;
}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved