自CSS3流行以來，雖然以前看過一遍所有的新增屬性，但其實在實際項目中用到的少之又少。所以沒有形成系統性的認識，以及看到效果立馬就能想到解決方案的能力。然後最近正好遇到一個需要繪製大量動畫的需求，所以決定趁此機會好好研究一下這個既熟悉又陌生的css3。
在正式開始css3之前，先來介紹一些比較經典的css3實例，讓大家好好感受一下css3的魅力，本文會提到以下幾個css3的屬性：
border-radius、::after、attr和content、box-sizing、linear-gradient、radial-gradient、box-shadow
border-radius
相信這個屬性，寫過css的同學都知道，用來產生圓角，比如畫一個圓形：
div{
width:100px;
height:100px;
background:red;
border-radius:100px;//border-radius:100%;
}
然後我們來看看它的語法：border-radius: [左上] [右上] [右下] [左下]，於是我們來畫一個半圓
div{
width:100px;
height:50px;
background:red;
border-radius:50px50px00;
}
那如果要畫一個橢圓該怎麼辦呢？你會發現上面的語法貌似做不到了，其實border-radius的值還有一種語法: x半徑/y半徑：
div{
width:100px;
height:50px;
background:red;
border-radius:50px/25px;
}
如果我要畫半個橢圓，又要咋辦呢？
div{
width:100px;
height:50px;
background:red;
border-radius:100%00100%/50%;
}
::after
這裏拿個簡單的例子來看，我們要畫一個放大鏡，如下圖：
分析一下，這個放大鏡可以由兩個div組成，一個是黑色的圓環，一個是黑色把手（旋轉45度）。所以我們就需要用兩個div來實現嗎？答案是NO，一個div也是可以的，我們可以藉助::after來添加一個元素。同理如果需要三個div，我們還可以使用::before再添加一個元素。下面看一下代碼：
div{
width:50px;
height:50px;
border-radius:50%;
border:5pxsolid#333;
position:relative;
}
div::after{
content:'';
display:block;
width:8px;
height:60px;
border-radius:5px;
background:#333;
position:absolute;
right:-22px;
top:38px;
transform:rotate(-45deg);
}
attr和content
比如我們要實現一個懸浮提示的功能。傳統方法，使用title屬性就能實現，但是現在我們要更美觀，可以使用css3提供的attr：能夠在css中獲取到元素的某個屬性值，然後插入到僞元素的content中去。
假如我們的html代碼如下：
<div data-title="hello, world">hello...</div>
我們來看看實現這個插件的css代碼：
div{
position:relative;
}
div:hover::after{
content:attr(data-title);//取到data-title屬性的值
display:inline-block;
padding:10px14px;
border:1pxsolid#ddd;
border-radius:5px;
position:absolute;
top:-50px;
left:-30px;
}
當hover的時候，在元素尾部添加一個內容爲data-title屬性值的元素，所以就實現了hover顯示的效果，如下圖所示：
box-sizing
我們知道，在標準盒子模型中，元素的總寬＝content + padding + border + margin。 css中的盒子模型大家可能都知道，但是這個盒子模型的屬性可能沒有那麼多人知道，box-sizing屬性就是用來重定義這個計算方式的，它有三個取值，分別是：content-box（默認）、border-box、padding-box
一般來說，假如我們需要有一個佔寬200px、padding10px、border5px的div，經過計算，要這麼定義樣式。
div{
width:170px;//這裏的寬度要使用200-10*2-5*2=170得到。
height:50px;
padding:10px;
border:5pxsolidred;
}
然後我們來使用一下box-sizing屬性。
div{
box-sizing:border-box;
width:200px;//這裏的寬度就是元素所佔總寬度，不需要計算
height:50px;
padding:10px;
border:5pxsolidred;
}
linear-gradient
做活動頁面的時候我們經常會遇到這樣的需求：
頂部的中間一張大banner圖片，然後整個區域的背景色要根據圖片背景色漸變。就可以使用這個屬性了。
div{
width:200px;
height:50px;
background:linear-gradient(toright,red,yellow,black,green);
}
是不是很有趣？其實，linear-gradient還有更多有趣的功能，你可以根據下面的動圖去感受一下：
你以爲這就完了？等等，還有更強大的呢！repeating-linear-gradient，來感受一下：
linear-gradient還有更加強大的功能，比如它可以給元素添加多個漸變，從而達到更NB的效果。
radial-gradient
上面的linear-gradient是線性漸變，這個屬性是徑向漸變。下面的代碼實現了一個chrome的logo。
div.chrome{
width:180px;
height:180px;
border-radius:50%;
box-shadow:004px#999,002px#dddinset;
background:radial-gradient(circle,#4FACF50,#2196F328%,transparent28%),
radial-gradient(circle,#fff33%,transparent33%),
linear-gradient(-50deg,#FFEB3B34%,transparent34%),
linear-gradient(60deg,#4CAF5033%,transparent33%),
linear-gradient(180deg,#FF756B0,#F4433630%,transparent30%),
linear-gradient(-120deg,#FFEB3B40%,transparent40%),
linear-gradient(-60deg,#FFEB3B30%,transparent30%),
linear-gradient(0deg,#4CAF5045%,transparent45%),
linear-gradient(60deg,#4CAF5030%,transparent30%),
linear-gradient(120deg,#F4433650%,transparent50%),
linear-gradient(180deg,#F4433630%,transparent30%);
}
實現原理就是使用了多個漸變色放在div上，友協被遮住，視覺上就產生了想要的效果，是不是很強大！看了下圖你就知道其實就是在div上加了很多個漸變。
box-shadow
上面的例子大都是對css3新屬性的瞭解和認識，這個實例則是有關於解決方案的例子。
需求：我們要實現下面這個效果圖（三個邊框：黑色，綠色，紅色）：
解法一：假如沒有css3知識，我們可以做這樣做：用三個div，分別設置邊框，然後分別控制寬高和位置來達到這個效果。顯然，很複雜，這裏就不貼代碼了。
解法二：現在我們有css3的知識了，藉助box-shadow就可以輕鬆解決這個問題。先來看看它的語法：box-shadow: [x偏移] [y偏移] [陰影模糊寬度] [陰影寬度] [顏色]，並且還能添加多個陰影，使用逗號隔開。當然你還可以繼續增加，四重邊框，五重邊框……都不再是問題啦。另外，還能加圓角，陰影會貼緊內層div。
使用這種方法，有一個缺點就是，不支持虛線邊框。
解法三： 使用outline（只能支持兩重邊框）使用這種方法的缺點就是，只能支持兩層的邊框，而且還不能根據容器的border-radius自動貼合。
總結
通過這段時間對css3的深入瞭解，發現css3真的很強大，研究起來還是挺有趣的，只有想不到，感覺沒有做不到。不過爲了實現很酷炫的效果，可能需要編寫大量的css代碼，這個時候使用什麼技術就需要我們自己來衡量了。