CSS3新增的屬性

2021-08-20 10:18:29 字數 1154 閱讀 3754

1、背景屬性

語法:background-clip:border-box/padding-box/content-box

border-box:背景被裁剪到邊框盒。

padding-box:背景被裁剪到內邊距框。

content-box:背景被裁剪到內容框。

語法:background-origin:border-box/padding-box/content-box

語法:background-size:length/percentage/cover/contain

說明:在css3中,可以使用background-size屬性來指定背景影象的大小。

在乙個元素中新增多張背景

語法:div

說明:第乙個定義的背景在最上面的,最後定義的是在最下面的。使用background-repeat和background-position可以單獨指定背景影象中某個檔案的平鋪方式與放置位置。

2、邊框屬性

語法:border-raidus

說明:圓角邊框

border-radius:左上角  右上角   右下角  左下角

語法:border-image:url("url")a b c d/border-image-width border-image-repeat

說明:讓處於隨時變化狀態的元素的長或寬的邊框統一使用乙個影象檔案來繪製。

第乙個引數作為邊框使用影象的路徑,

abcd表示當瀏覽器自動把邊框所使用到的影象進行分隔時的上邊距,右邊距,下邊距,左邊劇,四個邊距相同時可以縮寫成乙個,不需要單位

border-width:表示邊框的寬度

border-image-repeat:表示影象邊框是否應平鋪(repeat)、鋪滿(round)或拉伸(stretch)

3、盒陰影

語法:box-shadow:h-shadow v-shadow blur spread color inset

說明:讓盒在顯示時產生陰影效果。

h-shadow:必需。水平陰影的位置。允許負值。

v-shadow:必需。垂直陰影的位置。允許負值。

blur:可選。陰影距離。

spread:可選。陰影的尺寸。

color:可選。陰影的顏色。

inset:可選。將外部陰影(outset)改為內部陰影。

CSS3新增屬性用法整理CSS3新增屬性用法整理

css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...

css3 新增屬性

background origin 背景影象顯示的原點。background clip 規定背景的繪製區域。padding box 從padding區域 含padding 開始顯示背景影象。border box 從border區域 含border 開始顯示背景影象。content box 從cont...

Css3新增屬性

1.新增邊框屬性 box shadow 實現邊框陰影 屬性值有 模糊度 x軸偏移y軸偏移 color 陰影顏色 border radius 實現圓角邊框 屬性值越大角度越大 border image 實現邊框 border image source slice width outset repeat...