與背景和邊框相關樣式

2021-06-08 04:17:47 字數 2879 閱讀 5825

新增屬性

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...