一、線性漸變
在CSS中部分屬性需要添加瀏覽器前綴
-moz-:表示火狐內核瀏覽器
-webkit-:表示谷歌內核瀏覽器
-ms-:表示IE內核瀏覽器
-o-:表示歐朋(opera)內核瀏覽器
<style>
.div1{background-p_w_picpath:linear-gradient(to top,red,green);width:400px;height:180px;}
.div2{background-p_w_picpath:linear-gradient(45deg,red,green);width:400px;height:180px;}
.div3{background-p_w_picpath:-webkit-repeating-linear-gradient(-45deg,red,green,red 20%);width:400px;height:80px;
background-p_w_picpath:-moz-repeating-linear-gradient(-45deg,red,green,red 20%);width:400px;height:80px;
background-p_w_picpath:-ms-repeating-linear-gradient(-45deg,red,green,red 20%);width:400px;height:80px;
}
</style>
<div class="div1">普通線性漸變</div>
<div class="div2">角度線性漸變</div>
<div class="div3">重複線性漸變</div>二、徑向漸變
<style>
.div4{width:300px;height:80px;
background-p_w_picpath:-webkit-radial-gradient(10px 20px,red,green);/*谷歌瀏覽器*/
background-p_w_picpath:-moz-radial-gradient(10px 20px,red,green);/*火狐瀏覽器*/
background-p_w_picpath:-ms-radial-gradient(10px 20px,red,green);/*IE瀏覽器 其中10px 20px表示徑向漸變的中心點*/
}
.div5{width:300px;height:80px;
background-p_w_picpath:-webkit-radial-gradient(center center,circle,red,green);/*谷歌瀏覽器*/
background-p_w_picpath:-moz-radial-gradient(center center,circle,red,green);/*火狐瀏覽器*/
background-p_w_picpath:-ms-radial-gradient(center center,circle,red,green);/*IE瀏覽器 其中circle表示徑向漸變的形狀，還可以是ellipse*/
}
.div6{width:300px;height:80px;
background-p_w_picpath:-webkit-repeating-radial-gradient(center center,circle,red,green,red 10%);/*谷歌瀏覽器*/
background-p_w_picpath:-moz-repeating-radial-gradient(center center,circle,red,green,red 10%);/*火狐瀏覽器*/
background-p_w_picpath:-ms-repeating-radial-gradient(center center,circle,red,green,red 10%);/*IE瀏覽器 其中circle表示徑向漸變的形狀，還可以是ellipse*/
}
</style>
<div class="div4">普通徑向漸變</div>
<div class="div5">指定形狀的徑向漸變</div>
<div class="div6">重複徑向漸變</div>三、倒影
box-reflect：none | <direction> <offset>? <mask-box-p_w_picpath>?
<direction> = above | below | left | right
<offset> = <length> | <percentage>
<mask-box-p_w_picpath> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
默認值：none
適用於：所有元素
繼承性：無
取值：
none：無倒影
<direction> Demo: 簡單圖片倒影 See with Webkit
above：指定倒影在對象的上邊
below：指定倒影在對象的下邊
left：指定倒影在對象的左邊
right：指定倒影在對象的右邊
<offset> Demo: 圖片與倒影間隔 See with Webkit
<length>：用長度值來定義倒影與對象之間的間隔。可以爲負值
<percentage>：用百分比來定義倒影與對象之間的間隔。可以爲負值
<mask-box-p_w_picpath> Demo: 更真實的圖片倒影 文字倒影與漸變 See with Webkit
none：無遮罩圖像
<url>：使用絕對或相對地址指定遮罩圖像。
<linear-gradient>：使用線性漸變創建遮罩圖像。
<radial-gradient>：使用徑向(放射性)漸變創建遮罩圖像。
<repeating-linear-gradient>：使用重複的線性漸變創建背遮罩像。
<repeating-radial-gradient>：使用重複的徑向(放射性)漸變創建遮罩圖像。
.div6{-webkit-box-reflect:below 1px -webkit-linear-gradient(top,transparent 50%,#F00);}
<div class="div6"><img src="Hydrangeas.jpg" width="240" height="180"/></div>
四、旋轉(transform)
transform:rotate(45deg); 旋轉45度角，旋轉中心在盒子的中心點
transform-origin:0 0; 指定旋轉中心
<style>
.trans{width:200px;height:80px;background:red;
transform-origin:40,80;
transform:rotate(45deg);}
</style>
<div class='trans'></div>立方體旋轉實例
<style>
.tran{width:200px;height:120px;
-webkit-transform-style:preserve-3d;
display:inline-block;
-webkit-animation: rotate 5s infinite;
animation: rotate 5s infinite;
-webkit-animation: rotate 5s infinite;
animation: rotate 5s infinite;
}
.tran div{width:100px;height:100px;border:1px solid #666;
position:absolute;}
.t1{-webkit-transform:translatez(50px);}
.t2{-webkit-transform:rotatey(180deg) translatez(50px);}
.t3 {
-webkit-transform: rotatey(90deg) translatez(50px);
transform: rotatey(90deg) translatez(50px);
}
.t4 {
-webkit-transform: rotatey(-90deg) translatez(50px);
transform: rotatey(-90deg) translatez(50px);
}
.t5 {
-webkit-transform: rotatex(90deg) translatez(50px);
transform: rotatex(90deg) translatez(50px);
}
.t6 {
-webkit-transform: rotatex(-90deg) translatez(50px);
transform: rotatex(-90deg) translatez(50px);
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotatey(0);
}
to {
-webkit-transform: rotatey(360deg);
}
}
</style>
<body>
<div class="tran">
<div class="t1">1</div>
<div class="t2">2</div>
<div class="t3">3</div>
<div class="t4">4</div>
<div class="t5">6</div>
<div class="t6">7</div>
</div>五、用戶界面
resize 設置用戶可否調整盒模型寬高
resize:none 不允許用戶調整高寬
resize:both 允許用戶調整高和寬
resize:horizontal 允許用戶調整寬度
resize:vartical 允許用戶調整高度
user-select:none 不允許用戶選擇文本
鼠標指針
cursor:pointer 手型
六、過度(transition)
transition:background-color 1s ease-in 0.5s
第一個參數表示過度的屬性，取值可以是單個屬性也可以是none 不指定過度屬性，all表示所有屬性
第二個參數表示過渡時間
第三個參數表示過渡類型 linear(線性過渡)|ease(平滑過渡)|ease-in(由慢到快)|ease-out（由快到慢）
第四個參數表示延遲時間
七、動畫(animation)
animation:yidong 2s ease-in 0.5s infinite reverse
第一個參數動畫名稱
第二個參數動畫持續多長時間
第三個參數過渡類型
第四個參數延遲時間
第五個參數循環次數
第六個參數是否反向運動 reverse反方向運動|alternate 先正常運行，然後在反向交替運行
alternate-reverse先反向運行在正常運行然後交替運行
-webkit-@keyframe yindong{
from{}
to{}
}
實例
<stytle>
.ani{
width:200px;height:80px;background:#666;
font-size:14px;
animation:yidong 5s ease-out infinite alternate;
}
@-webkit-keyframes yidong{
from{opacity:0;}
to{opacity:1;
transform:translate(20px);}
}
</style>
<div class="ani">這是一個動畫</div>七、多列
column:120px 3 120表示每列的寬 3表示總的列數
column-rule:dashed 5px blue
column-gap:10px 列之間的距離
column-fill:auto 以最高一列的高度爲基準