CSS3把很多以前需要使用圖片和腳本來實(shí)現(xiàn)的效果、甚至動畫效果，只需要短短幾行代碼就能搞定
2016-11-240個贊
animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 animation-name 規(guī)定 @keyframes 動畫的名稱。 animation-duration 規(guī)定動畫完成一個周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。 animation-timing-function 規(guī)定動畫的速度曲線。默認(rèn)是 "ease"。 animation-delay 規(guī)定動畫何時開始。默認(rèn)是 0。 animation-iteration-count 規(guī)定動畫被播放的次數(shù)。默認(rèn)是 1。 animation-direction 規(guī)定動畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。 animation-play-state 規(guī)定動畫是否正在運(yùn)行或暫停。默認(rèn)是 "running"。
2016-12-050個贊
對CSS3已完全向后兼容，所以你就不必改變現(xiàn)有的設(shè)計。瀏覽器將永遠(yuǎn)支持CSS2。
2016-11-240個贊
Border-color(設(shè)置邊框顏色) Border-image(通過圖片設(shè)置為邊框) Border-radius(邊框的半徑) box-shadow(陰影效果)
2016-11-240個贊
border-radius 屬性，你可以給任何元素制作 "圓角"
2016-11-240個贊
CSS3中可以通過background-image屬性添加背景圖片 background-size指定背景圖像的大小 background-Origin屬性指定了背景圖像的位置區(qū)域 background-clip背景剪裁屬性是從指定位置開始繪制
2016-11-240個贊
[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color] 設(shè)置或檢索對象的列與列之間的邊框。復(fù)合屬性。相當(dāng)于border屬性 column-rule-style 屬性指定了列與列間的邊框樣式 column-rule-color 屬性指定了兩列的邊框顏色 column-width 屬性指定了列的寬度
2016-12-050個贊
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向 徑向漸變（Radial Gradients）- 由它們的中心定義
2016-11-240個贊
box-sizing: content-box; 當(dāng)設(shè)置box-sizing:content-box;時，瀏覽器對盒模型的解釋遵從W3C標(biāo)準(zhǔn)，當(dāng)它定義width和height時， 它的寬度不包括border和padding。 outline-offset：<length> | inherit <length>：定義輪廓距離容器的值。 inherit：默認(rèn)繼承
2016-12-050個贊
text-shadow:length length length color 前面三個length分別指陰影離開文字的橫方向距離、陰影離開文字的縱方向距離和陰影的模糊半徑，color指陰影的顏色
2016-11-240個贊
font-family：設(shè)置文本的字體名稱。 font-style：設(shè)置文本樣式。 font-variant：設(shè)置文本是否大小寫。 font-weight：設(shè)置文本的粗細(xì)。 font-stretch：設(shè)置文本是否橫向的拉伸變形。 font-size：設(shè)置文本字體大小。 src：設(shè)置自定義字體的相對路徑或者絕對路徑。
2016-11-240個贊
<style type="text/css"> div { height: 100px; width: 100px; background: #f60; border-radius: 18px; border:3px solid red; } </style> <div></div>
2016-12-050個贊
transform: translate(50px,100px);
2016-11-240個贊
rotateX()方法，圍繞其在一個給定度數(shù)X軸旋轉(zhuǎn)的元素。 rotateY()方法，圍繞其在一個給定度數(shù)Y軸旋轉(zhuǎn)的元素。
2016-11-240個贊
<style> .button { background-color: #4CAF50; /* Green */ border-style: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; outline: none; /*去除button的默認(rèn)樣式，點(diǎn)擊出現(xiàn)邊框*/ } .button:hover{ color:red; } .button1 {border-radius: 12px;} .button2 {border-radius: 44px;} .button3 {border-radius: 28px;} .button4 {border-radius: 32px;} .button5 {border-radius: 50%;} </style> <button class="button button1">2px</button> <button class="button button2">4px</button> <button class="button button3">8px</button> <button class="button button4">12px</button> <button class="button button5">50%</button>
2016-12-050個贊
