首頁 >web前端 >css教學 >CSS border-color 屬性使用方法_CSS教學_CSS_網頁製作

CSS border-color 屬性使用方法_CSS教學_CSS_網頁製作

巴扎黑
巴扎黑原創
2017-06-28 13:58:581888瀏覽

border-color -- 定義四個邊框的顏色 取值:[ | transparent ]{1,4} | inherit {1,4}: 顏色表示法 transparent{1,4}: 透明 inherit: 繼承 初始值: 同color屬性的預設值 繼承性: 否 適用於: 所有元素 border:邊框,color:顏色. border-colo border-color -- 定義四個邊框的顏色
取值:[ | transparent ]{1,4} | inherit
{1,4}: 顏色表示法
transparent{1,4}: 透明
inherit: 繼承
初始值: 同color屬性的預設值
繼承性: 否
適用於: 所有元素
border:邊框,color :顏色.
border-color和border-width的賦值方式是一樣的,可以分別賦1,2,3或4個顏色值.

範例
p#fourborders
{
border-color:red black blue green;
}
如果定義四個值,那麼這四個值就分別是上,右,下,左邊框(從上方邊框開始,以順時針的順序遍歷).定義夢之都段落的上邊框為紅色,右邊框為黑色,下邊框為藍色,左邊框為綠色.

p#threeborders
{
border-color:red black blue;
}
如果只定義三個值,中間的值代表左和右邊框.定義夢之都段落的上邊框為紅色,下邊框為藍色,左,右邊框為黑色.

p#twoborders
{
border-color:red black;
}
如果只定義兩個值,前面的值代表上下邊框,後面的數值代表左右邊框.定義夢之都段落的上,下邊框為紅色,右,左邊框為黑色.

p#oneborders
{
border-color :red;
}
如果只定義一個值,這個值就代表四個邊的.定義夢之都段落的邊框為紅色.

腳本之家提示: 當不設定邊框顏色border-color時,邊框的顏色使用此元素的color屬性的值.

p#bordercolor
{
border-bottom:solid;
color :red;
}
上例中,由於沒有設定border-color的值,因此取color的值紅色.

css border-color 屬性範例-- 使用color的顏色值.

腳本之家提示: 由於CSS屬性具有覆蓋的特性,所以設定的順序很重要.

p
{
border:medium solid green;
border-bottom:solid;
color:red;
}
上例中,下邊框的顏色為紅色,其它邊框為綠色.因為border-bottom沒有設定顏色,所以應該取color指定的顏色.

以上是CSS border-color 屬性使用方法_CSS教學_CSS_網頁製作的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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