03 CSS3背景與漸變

css3的背景縮寫

background: color position size repeat origin clip attachment image;

//按照該順序，不能省略

background-clip

background-clip: border-box | padding-box | content-box;　　//指定背景繪製區域

//border-box：背景被裁剪到邊框盒

//padding-box：背景被裁剪到內邊距框

//content-box：背景被裁剪到內容框

background-origin

background-origin: border-box | padding-box | content-box;　　//

指定background-position屬性應該是相對位置

//border-box：從邊框開始

//padding-box：從內邊距開始

//content-box：從內容區開始

搭配：background-position:50px,70px;　　//水平方向偏移50px，垂直方向偏移70px

background-size

background-size: length | percentage | cover | contain;　　//指定背景大小

background-size: 90px 80px;　　//

把原有縮放到90×80，放到容器中。

background-size: 80% auto;　　//

水平方向壓縮到容器的80%，垂直方向為本身高度

background-size: cover;　　//

水平垂直方向都鋪滿整個容器

background-size: contain;　　//

水平方向足夠長的話就會鋪滿容器的寬度，高不變。

//垂直方向足夠高的話就會鋪滿容器的高度，寬不變。

background-image

background-image: url(1.png),url(2.png);　　//允許元素使用多個背景圖
//第乙個背景圖會蓋到第二個背景圖上面。（第乙個背景圖可以適當做半透明的png格式）

線性漸變（使用角度）

background: linear-gradient(angle,color1,color2, ...);　　//從某個角度/方向開始，color1顏色 漸變到 color2顏色。

//方向：上到下to bottom、下到上to top、左到右to right、右到左to left、左上到右下to bottom right、左下到右上to top right等；

//角度：下到上0deg、左到右90deg等

background: linear-gradient(45deg, red,blue);   //從45deg的方向，從紅色漸變到藍色。

background: linear-gradient(red,blue 30%,green 60%);　　//預設從上到下漸變；0%到30% 紅色漸變到藍色，30%到60% 藍色漸變到綠色，60%到100% 綠色。

background:repeating-linear-gradient(red, yellow 10%, green 20%); 　　//重複的線性漸變//0-10%-20%，乙個容器100%，所以會重複五遍

-webkit-linear-gradient（webkit核心瀏覽器相容的寫法），它的旋轉角度為

徑向漸變

background: radial-gradient(center,shape size,star-color, ... ,last-color);　　//從起點到終點，顏色從內到外，進行圓形漸變（從中間向外拉）

圓心除了center外還可以，10% 20% | 10px 20px 這樣從左上角頂點開始進行偏移

shape（形狀）有兩種，ellipse橢圓(預設)，circle圓。如果高寬一樣，設定哪一種都是圓形。

//上面時顏色結點均勻分布的，下面展示一下不均勻分布的

background: radial-gradient(center,circle,red,blue 20%,yellow30% ); //預設從圓心到對角線為100%

徑向漸變（尺寸大小關鍵字）

background: radial-gradient(size,color1,color2, ...);　　//從圓心到size為100%，圓心不在中心點情況

size值（當圓心不在中心點時）closest-side，從圓心到最近邊為100%

farthest-side，從圓心到最遠邊為100%

closest-corner，從圓心到最近角為100%

farthest-corner，從圓心到最遠角為100%

background:repeating-radial-gradient(red, yellow 10%, green 20%); //重複的徑向漸變

//0-10%-20%，乙個容器100%，所以會重複五遍

ie6到ie9漸變

filter: progid:dximagetransform.microsoft.gradient(
starcolorstr='starcolor',
endcolorstr='endcolor',
gradienttype=0);

03 CSS3背景與漸變

14CSS3背景與漸變

css3 背景漸變

03 css3中的3D轉換

03 CSS3背景與漸變

14CSS3背景與漸變

css3 背景漸變

03 css3中的3D轉換

相關推薦