css3背景 邊框 和補丁相關屬性

2022-08-13 09:39:13 字數 2600 閱讀 8665

border :基本語法

border: border-width || border-style || border-color 預設值為: medium none 。

border-color 的預設值將採用文字顏色

border-top,border-left,border-right,border-bottom:它們分別對邊框的某個方向起作用,語法基本與border相同

border-bottom-color,border-top-color,border-bottom-color,border-right-color:分別設定某個邊框的顏色:

例如border-bottom-color:red設定下邊框的顏色為紅色

border-bottom-width,border-top-width,border-bottom-width,border-right-width:分別設定某個邊框的寬度:

基本語法:border-bottom-width : medium | thin | thick | length 其中length由浮點數字和單位識別符號組成的長度值。不可為負值,例如border-bottom-width :thin;

border-bottom-style,border-top-style,border-bottom-style,border-right-style:分別設定某個邊框的樣式:

基本語法:border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset none    :  預設值。無邊框。不受任何指定的 border-width 值影響

hidden  :  隱藏邊框。

ie不支援 dotted  :  在mac平台上ie4+與windows和unix平台上ie5.5+為點線。否則為實線

dashed  :  在mac平台上ie4+與windows和unix平台上ie5.5+為虛線。否則為實線

solid   :  實線邊框

double  :  雙線邊框。兩條單線與其間隔的和等於指定的 border-width 值

groove  :  根據 border-color 的值畫3d凹槽

ridge   :  根據 border-color 的值畫菱形邊框

inset   :  根據 border-color 的值畫3d凹邊

outset  :  根據 border-color 的值畫3d凸邊

css3.0新增: 設定圓角: border-radius : none | [ / ]?

相關屬性: border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius 取值:

: 由浮點數字和單位識別符號組成的長度值。不可為負值。

border-top-left-radius: 由浮點數字和單位識別符號組成的長度值。不可為負值。

說明:第乙個值是水平半徑。如果第二個值省略,則它等於第乙個值,這時這個角就是乙個四分之一圓角。 如果任意乙個值為0,則這個角是矩形,不會是圓的。 值不允許是負值。

例如: border-radius :4px;

邊框物件顏色: border-color :

相關屬性 :border-top-color, border-right-color, border-bottom-color , border-left-color 設定物件邊框的顏色。

使用css3的border-radius屬性,如果你設定了border的寬度是x px,那麼你就可以在這個border上使用x種顏色,每種顏色顯示1px的寬度。如果說你的border的寬度是10個畫素,但是只宣告了5或6種顏色,那麼最後乙個顏色將被新增到剩下的寬度。

例如針對上例中的邊框設定為4px,顏色可以設定為4中不同的顏色 border-color:#555 #666 #777 #888

邊框背景: border-image : none | [ | ] [ / ]? [ stretch | repeat | round ]

相關屬性 : border-image:border-top-image , border-right-image , border-bottom-image , border-left-image,border-corner-image:border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image 取值:none: 預設值。無背景圖。

: 邊框寬度用固定畫素值表示。

: 邊框寬度用百分比表示。 [ stretch | repeat | round ]: 拉伸 | 重複 | 平鋪 (其中stretch是預設值。)

border-image: url(img/bt_blue.png) 0 12 0 12 stretch stretch;

設定邊框陰影: box-shadow:||

相關屬性:text-shadow 取值:? ? || : 陰影水平偏移值(可取正負值);陰影垂直偏移值(可取正負值);陰影模糊值;陰影顏色 box-shadow:5px 2px 6px #000

css3背景 邊框 和補丁相關屬性 (二)

背景 background background color background image background repeat background attachment background position 預設值為 transparent none repeat scroll 0 0 設定...

CSS3 邊框和背景

下述內容主要講述了 html5權威指南 第19章關於 使用邊框和背景 css3中邊框和樣式得到了增強。例如 可以建立圓角邊框,使用影象邊框,為元素建立陰影。表 基本邊框屬性屬性 說明值border width 設定邊框的寬度 長度值 百分數 thin medium thick border styl...

css3 背景和邊框

設定背景和邊框 設定背景顏色 background color blanchedalmond background color rgb 100,200 255 background color f4f4f4 邊框設定 具體到屬性 border width 1px 設定邊框寬度 border colo...