CSS3初體驗之奇技淫巧

---

自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:50px;    //圓角效果最大爲長寬的一半，因此設置爲50px及以上都可。
        /*border-radius:50%; */   //或者使用百分比，設置爲50%及以上都是圓形效果。
    }複製代碼

  

• 而後咱們來看看它的語法：border-radius: [左上] [右上] [右下] [左下]，因而咱們來畫一個半圓

  div {
        width: 100px;
        height: 50px;
        background: red;
        border-radius: 50px 50px 0 0;
    }複製代碼

  

• 那若是要畫一個橢圓該怎麼辦呢？你會發現上面的語法貌似作不到了，其實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% 0 0 100% /50%;
    }複製代碼

  

::after

這裏拿個簡單的例子來看，咱們要畫一個放大鏡，以下圖：

分析一下，這個放大鏡能夠由兩個div組成，一個是黑色的圓環，一個是黑色把手（旋轉45度）。因此咱們就須要用兩個div來實現嗎？答案是NO，一個div也是能夠的，咱們能夠藉助::after來添加一個元素。同理若是須要三個div，咱們還可使用::before再添加一個元素。下面看一下代碼：

div {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 5px solid #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: 10px 14px;
    border: 1px solid #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: 5px solid red;
}複製代碼

而後咱們來使用一下box-sizing屬性。

div {
    box-sizing: border-box;
    width: 200px;  //這裏的寬度就是元素所佔總寬度，不須要計算  
    height: 50px;
    padding: 10px;
    border: 5px solid red;
}複製代碼

linear-gradient

作活動頁面的時候咱們常常會遇到這樣的需求：

頂部的中間一張大banner圖片，而後整個區域的背景色要根據圖片背景色漸變。就可使用這個屬性了。

div {
    width: 200px;
    height: 50px;
    background: linear-gradient(to right, 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: 0 0 4px #999, 0 0 2px #ddd inset;
    background: radial-gradient(circle, #4FACF5 0, #2196F3 28%, transparent 28%),
                radial-gradient(circle, #fff 33%, transparent 33%),
                linear-gradient(-50deg, #FFEB3B 34%, transparent 34%),
                linear-gradient(60deg, #4CAF50 33%, transparent 33%),
                linear-gradient(180deg, #FF756B 0, #F44336 30%, transparent 30%),
                linear-gradient(-120deg, #FFEB3B 40%, transparent 40%),
                linear-gradient(-60deg, #FFEB3B 30%, transparent 30%),
                linear-gradient(0deg, #4CAF50 45%, transparent 45%),
                linear-gradient(60deg, #4CAF50 30%, transparent 30%),
                linear-gradient(120deg, #F44336 50%, transparent 50%),
                linear-gradient(180deg, #F44336 30%, transparent 30%);
}複製代碼

實現原理就是使用了多個漸變色放在div上，友協被遮住，視覺上就產生了想要的效果，是否是很強大！看了下圖你就知道其實就是在div上加了不少個漸變。

box-shadow

上面的例子大都是對css3新屬性的瞭解和認識，這個實例則是有關於解決方案的例子。

• 需求：咱們要實現下面這個效果圖（三個邊框：黑色，綠色，紅色）：

  

• 解法一：假如沒有css3知識，咱們能夠作這樣作：用三個div，分別設置邊框，而後分別控制寬高和位置來達到這個效果。顯然，很複雜，這裏就不貼代碼了。

• 解法二：如今咱們有css3的知識了，藉助box-shadow就能夠輕鬆解決這個問題。先來看看它的語法：box-shadow: [x偏移] [y偏移] [陰影模糊寬度] [陰影寬度] [顏色]，而且還能添加多個陰影，使用逗號隔開。

  

  固然你還能夠繼續增長，四重邊框，五重邊框......都再也不是問題啦。另外，還能加圓角，陰影會貼緊內層div。

  使用這種方法，有一個缺點就是，不支持虛線邊框。

• 解法三： 使用outline（只能支持兩重邊框）

  

  使用這種方法的缺點就是，只能支持兩層的邊框，並且還不能根據容器的border-radius自動貼合。

總結

經過這段時間對css3的深刻了解，發現css3真的很強大，研究起來仍是挺有趣的，只有想不到，感受沒有作不到。不過爲了實現很酷炫的效果，可能須要編寫大量的css代碼，這個時候使用什麼技術就須要咱們本身來衡量了。