CSS3新增屬性2

陰影

box-shadow:水平偏移 垂直偏移; 偏移能夠負值 box-shadow:水平偏移 垂直偏移 顏色; box-shadow:水平偏移 垂直偏移 模糊值 顏色; /*最多見的*/ box-shadow:水平偏移 垂直偏移 模糊值 外延值 顏色; 

背景

background-size: cover / contain / 400px 300px / 100% 100% background: color image postion/size repeat attachment 

CSS3變換

• transform

  translatex() translatey() translate(x, y) rotate() 角度 deg skewx() 角度deg skewy() skew(x, y) 

• transform-origin 變換的原點。 對translate沒有意義。 對rotate影響大

過渡效果

哪些CSS屬性能夠過渡

長度 (padding margin width height left/top/right/bottom border-width background-position ...) 顏色 變換 純數字 (opacity、z-index) 

觸發過渡

僞類觸發 :hover :focus .... 媒體查詢 @media JS 

相關屬性

transition-property 指定要過渡的屬性 用,隔開。默認是 all transition-duration 過渡持續時間 transition-timing-function 過渡線性效果 默認 ease transition-delay 過渡延遲 transition：property timing-function duration delay 

CSS3動畫

關鍵幀

@keyframes 動畫名字 { 0% { } 20% { } 40% { } 100% { } } 

相關CSS屬性

animation-name  指定動畫的名字 animation-duration 動畫的執行時間 animation-timing-function 執行效果速度 animation-delay 延遲 animation-iteration-count 循環 次數 infinite(無限) animation-direction: alternate （正向 反向 交替）\ reverse（反向） animation-play-state: running / paused animation 複合屬性