title: CSS3新增屬性
date: 2016-09-08 11:55
tags: CSS
0x00 boxshadow [ CSS3 ]
box-shadow 有以下屬性值：
h-shadow : 必需。水平陰影位置。值為正投影在對象右邊，值為負(fù)，投影在對象左邊。
v-shadow : 必需。垂直陰影位置。值為正投影在對象低部。值為負(fù)，投影在對象頂部。
color : 陰影顏色。
blur : 可選。模糊距離
radial: 可選。擴展半徑。
inset : 可選。將外部陰影（outset）改為內(nèi)部陰影。
設(shè)置四邊不同的陰影:
box-shadow:-10px 0px 5px yellow,
10px 0px 5px red,
0px -10px 5px green,
0px 10px 5px blue;
多重陰影:
box-shadow:10px 0px 5px yellow,20px 0px 20px green;
text-shadow [ CSS3]
text-shadwo 與 boxs-hadow 基本相同，只是 text-shadwo 不可以定義內(nèi)陰影。
0x01 box-reflect
這是一個實驗中的屬性，并且實現(xiàn)情況并不理想，目前只有 Chrome 和 safari 支持。
語法樣式:
-webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(0,0,0,0.2) 33%,rgba(0,0,0,0.6) 63%,rgba(0,0,0,0.8) 99%);
支持的參數(shù)值：Direction，Offset，Mask Value。
分別代表倒影的方向: above,below,left,right
距離原圖的距離: 像素
倒影的漸變樣式:
0x02 Animation
animation 的子屬性有:
animation-name:使用 @keyframes 描述的關(guān)鍵幀名稱
animation-duration:動畫執(zhí)行的時間
animation-timing-function:動畫速度變化函數(shù)
其值有:linear,ease,ease-in,ease-out,ease-in-out
animation-delay:動畫延時執(zhí)行的時間
animation-iteration-count:設(shè)置動畫重復(fù)的次數(shù)，infinite 無限次重復(fù)動畫
animation-direction:動畫運行完成以后是反向運行還是重新回到開始位置重復(fù)運行。取值有 normal 和 alternate.當(dāng)設(shè)置為 alternate時，表示輪流播放，并且動畫會在奇數(shù)次數(shù)正常播放，在偶數(shù)次數(shù)反向播放。
animation-fill-mode:指定動畫執(zhí)行前后的元素樣式。其常用值有 forwards(當(dāng)動畫執(zhí)行完成以后，保持最后一個屬性值,在最后一個關(guān)鍵幀中定義) 和 backwards(在動畫顯示前，應(yīng)用開始屬性值，在第一個關(guān)鍵幀中定義)
animation-play-state:控制動畫的播發(fā)狀態(tài)，可取值:paused(暫停),running(動畫播放).
<style type="text/css">
body{
position: relative;
}
#box{
width: 100px;
height: 40px;
background: linear-gradient(red,deeppink,green);
position: absolute;
left: 0;
top:100px;
animation: turnBack 6s linear 1s infinite;
}
@-webkit-keyframes turnBack {
from{
left: 0px;
transform: rotateY(0deg)
} 50% {
left: 600px;
transform: rotateY(0deg)
} 51%{
transform: rotateY(180deg);
}to{
left: 0px;
transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<div id="box">
I'am box,sir!
</div>
</body>
0x03 Trasition
Transition 屬性用于過渡效果的 CSS 屬性。
常見用法:
trasition: peroperty duration timing-function delay
