新增屬性
background-clip:指定背景的顯示範圍(ff:-moz-background-clip,其他:-webkit-background-clip)
background-origin:指定繪製背景影象時起點(ff:-moz-background-origin,其他:-webkit-background-origin)
background-size:指定背景中影象尺寸(其他:-webkit-background-size,其他:-webkit-background-size)
background-break:指定內聯元素的背景影象進行平鋪時的迴圈方式(ff:-moz-background-inline-policy)
1.指定背景顯示範圍 background-clip屬性
哈羅1哈羅2
2.指定背景影象的繪製起點 background-origin屬性
background-origin:border; 邊框左上角
background-origin:padding; 內部補白區域左上角
background-origin:content; 內容的左上角
哈羅1哈羅2
哈羅3
3.指定背景影象尺寸 background-size屬性
哈羅1
4.指定內聯元素背景影象進行平鋪時的迴圈方式 background-break屬性
可指定bounding-box(背景影象在整個內聯元素中平鋪),each-box(背景影象在每一行中平鋪),continuous(下一行中影象緊接上一行影象平鋪)這3種迴圈方式,目前僅有ff瀏覽器支援
注:本人沒在ff試出來
哈羅哈羅哈羅哈羅哈羅哈羅哈羅
哈羅哈羅哈羅哈羅哈羅哈羅
哈羅哈羅哈羅哈羅哈羅哈羅哈羅
哈羅哈羅哈羅哈羅哈羅哈羅
哈羅哈羅哈羅哈羅哈羅哈羅哈羅
哈羅哈羅哈羅哈羅哈羅哈羅
在乙個元素中顯示多個背景影象
css3可在乙個元素中顯示多個背景影象,可將多個背景影象重疊顯示
使用background-image屬性指定影象檔案,第乙個影象檔案放最上,最後指定的檔案放最下
允許多重指定並配合多個影象檔案一起利用的屬性有如下:
1.background-image
2.background-repeat
3.background-position
4.background-clip
5.background-origin
6.background-size
圓角邊框的繪製
1.border-radius屬性
css3中用該屬性指定圓角半徑,就可以繪製圓角邊框啦
哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
2.在border-radius屬性中指定兩個半徑
在不同瀏覽器中效果可能不同
哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
3.繪製4個角不同半徑的圓角邊框
注:本人僅在ff瀏覽器中試驗成功
哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
使用影象邊框
1.border-image屬性
可讓處於隨時變化狀態的元素的長寬的邊框統一使用乙個影象繪製。讓瀏覽器在現實影象邊框是,自動所使用的影象分割為9部份處理
border-image:url(...) a b c d
url引數:為邊框所使用的影象檔案路徑
a b c d 表示當瀏覽器自動吧使用影象分割時上,右,下,左邊距
border-image:url(...) a b c d / border-width
border-width屬性用來指定邊框寬度,可將四條邊的邊框指定為不同寬度
哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
2.指定4條邊中影象的顯示方法
border-image:url(...) a b c d / border-width topbottom leftright
topbottom表示元素的上下兩條邊中影象的顯示方法
leftright表示元素的左右兩條邊中影象的顯示方法
可指定:repeat,stretch,round
repeat:影象將平鋪顯示
哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
stretch:影象以拉伸方式顯示
哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
round:影象平鋪,如果最後顯示的圖不能完全顯示,且能夠顯示的部份不到影象一半,不顯示最後影象,擴大前面影象,使顯示區正好完整平鋪全部影象
哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
border-image和background-image可一起使用
邊框樣式 背景樣式
1 邊框屬性 屬性說明 border width 邊框的寬度 border style 邊框的外觀 border color 邊框的顏色 border style 屬性值說明 none 無樣式hidden 與 none 相同。bug應用於表除外。對於表,hidden用於解決邊框衝突 solid 實線...
設定樣式 背景和邊框
一 背景 background 背景顏色 background color red 簡寫background red 背景background image url 路徑 簡寫background url 背景平鋪 1 平鋪 瀏覽器預設 2 不平鋪 background repeat no repea...
CSS非布局樣式背景 邊框
hsla 60,100 50 四個引數 顏色 0 360 飽和度 亮度 透明度 hsl 可以不設透明度 漸變色背景 background webkit linear gradient left,red,green background linear gradient to right,red,gre...