css3的一些屬性

以前還沒有注意過css的一些屬性，近期發現有一些樣式很好用，現在整理一遍。

@keyframes : 規定動畫

可以通過keyframes 改變乙個塊的樣式當然這是要配合animation屬性來結合的

@keyframes mymove（mymove必須定義動畫的名稱在）

100% 
}@-moz-keyframes mymove /* firefox */
100% 
}@-webkit-keyframes mymove /* safari 和 chrome */
100% 
}@-o-keyframes mymove /* opera */
100% 
}animation： 將動畫與元素繫結

規定動畫的速度曲線

linear：動畫從頭到尾的速度是相同的 

ease：預設。動畫以低速開始，然後加快，在結束前變慢。

ease-in：動畫以低速開始

ease-out：動畫以低速結束

ease-in-out：動畫以低速開始和結束

}規定在動畫開始之前的延遲

time：可選。定義動畫開始前等待的時間，以秒或毫秒計。預設值是 0}}

}規定動畫是否正在執行或暫停animation-play-state: paused|running;

paused：規定動畫已暫停

}none：不改變預設行為

forwards：當動畫完成後，保持最後乙個屬性值（在最後乙個關鍵幀中定義）

backwards：在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第乙個關鍵幀中定義）

both：向前和向後填充模式都被應用

}

div

background: #00ff00 url(bgimage.gif) red no-repeat fixed top;

設定元素高度

auto：預設。瀏覽器會計算出實際的高度

length：使用 px、cm 等單位定義高度

%：基於包含它的塊級物件的百分比高度

inherit：規定應該從父元素繼承 height 屬性的值

}規定如何對齊框的子元素box-align: start|end|center|baseline|stretch;

start：對於正常方向的框，每個子元素的上邊緣沿著框的頂邊放置，對於反方向的框，每個子元素的下邊緣沿著框的底邊放置

end：對於正常方向的框，每個子元素的下邊緣沿著框的底邊放置，對於反方向的框，每個子元素的上邊緣沿著框的頂邊放置

center：均等地分割多餘的空間，一半位於子元素之上，另一半位於子元素之下

baseline：如果 box-orient 是inline-axis或horizontal，所有子元素均與其基線對齊

stretch：拉伸子元素以填充包含塊

}

CSS3 一些屬性

1.flex direction 調整主軸方向 預設為水平方向 包括row column row reverse column reverse 2.justify content 主軸方向對齊，可以調整元素在主軸方向上的對齊方式，包括flex start flex end center space ...

css3一些屬性

1.第乙個引數預設朝外，可設定朝內inset或者不寫 2.第二個引數必須寫，左右水平偏移量 3.第三個引數必須寫，上下垂直偏移量 4.第四個引數可選，擴散blur寬度 5.第五個引數可選，顏色 box shadow裡面引數可以疊加，eg box shadow inset 1px 1px 1px pi...

css3 的一些新屬性

1.邊框新屬性 border radius border shadow border image 2.背景新屬性 background size background origin 規定背景的定位區域 3.文字效果 text shadow 文字陰影 word warp 強制換行 4.字型 font ...