css3新增屬性

1.border-box 設定背景圖從邊框開始填充 2.padding-box 設定背景圖從padding開始填充(預設)

3.content-box 設定背景圖從內容開始填充

1.border-box 設定背景圖從邊框開始裁剪(預設) 2.padding-box 設定背景圖從padding開始裁剪

3.content-box 設定背景圖從內容開始裁剪

1.cover 內容可能顯示不全，但是完全覆蓋，以的最短邊填充，其他按比例顯示

2.contain 可能顯示縫隙，以的最長邊填充，其他按比例顯示

background-size 也可以用數字設定值

引數為兩個

第乙個水平方向的大小

第二個垂直方向的大小

*如果只有乙個設定值，則表示只設定水平方向的大小，垂直方向按比例顯示

*也可以設定百分比，是基於背景圖所在的元素大小設定的百分比

設定方式和background一模一樣

注意1.只有谷歌等部分瀏覽器支援

2.使用了蒙版以後，原圖透明的部分被渲染成不透明，不透明的部分被渲染成透明

3.如果要使用蒙版，可以把他看做是背景來設定，他具有background的屬性

.wp

給元素新增立體感 box-shadow：x方向的位移 y方向的位移陰影的發散度陰影的寬度陰影顏色 inset 內陰影，讓陰影顯示在元素的內部陰影也可以設定多組值，多組之間用逗號隔開

注意：陰影不佔據盒模型的空間，不會引起盒模型的變化

linear-gradient 線性漸變屬性（以下的序號代表次序） 1. to 方向，或者是角度如果是角度的話正值：順時針旋轉 0 向上 90 向右 180 向下負值逆時針旋轉 2.漸變的顏色漸變的位置，可以設定很多個

漸變的位置，可以是具體的數值，也可以是百分比，百分比是基於自身的寬高

linear-gradient(漸變的方向，[顏色位置]，[顏色位置]，[顏色位置]，[顏色位置]，…)

background-image: repeating-linear-gradient(145deg, red 0, red 40%, green 40%, green);

radial-gradient(半徑形狀 at 圓心，[顏色位置]，[顏色位置]，[顏色位置]，[顏色位置]，…)

形狀1. circle 正圓

2. ellipse 橢圓(預設)

半徑1. farthest-corner 最遠角(預設)

2. closest-corner 最近角

3. farthest-side 最遠邊

4. closest-side 最近邊

圓心1.圓心支援px數值，第乙個是水平方向第二個是垂直方向

2.可以使用 left top right bottom center的組合

位置和顏色

出現漸變的位置，可以是具體的畫素，也可以是百分比，基於半徑的長度

background-image: radial-gradient(red 5%, yellow 15%, green 60%);
//由內到外

重複漸變至少設定兩種顏色

repeating-linear-gradient 重複線性漸變，內容和線性漸變設定的一致

ex：綠化帶效果

.box

box-reflect 三個引數 1.倒影所在的方位 left right above(上) below 2.倒影距離的位置設定具體的 px 3.倒影的蒙版，可以是具體的，也可以是漸變，漸變必須是純色和無色

倒影不占用盒模型空間

.wp

字型的格式 1. tff 常用於標準瀏覽器，安卓等 2. svg ios 3. eot 支援ie瀏覽器 4. woff 支援谷歌瀏覽器步驟1.將字型引入到工程裡面 2.宣告引入字型的 font-family名字 3.更改對應元素的 font-family

@font-face

x偏移量 y偏移量模糊大小陰影顏色

注:只有四個屬性，只有模糊度，沒有模糊半徑，沒有內陰影，可以用逗號隔開寫多組陰影疊加，但是不支援漸變屬性

如果谷歌瀏覽器的版本低於51的時候，需要加瀏覽器字首

指定分欄的列數 column-count：num 指定每一欄的寬度 column-width: 200px; 設定分欄樣式 column-rule 它的值同 border 設定分欄之間的縫隙 column-gap 子元素可以設定跨欄 column-span 該屬性有兩個值 1. 值為1 表示只跨乙個欄

2. all 表示跨所有欄

css3新增屬性

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

css3 新增屬性

Css3新增屬性

css3新增屬性

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

css3 新增屬性

Css3新增屬性

相關推薦