簡單CSS3實現炫酷讀者牆

如題，給你們介紹和講解幾個經常使用的CSS3屬性，並用到實處。

先看demo（請使用Chrome或者Firefox瀏覽，IE的靠邊）：

點此查看實例

以爲爽的能夠繼續閱讀下面的知識點，感受不爽的可繞行。

使用基礎的Html和CSS寫出雛形

須要一提的是頭像（img）的排版。給外面a標籤padding-left:;，img自身float:left;margin-left:;，這種寫法避免了很多因浮動產生的問題，且代碼簡明，推薦適當的使用此方法。

使用並解說所用CSS3

接下來給你們說說這個讀者牆所應用到的css3屬性，及其具體的使用方法，老鳥能夠飛了。

漸變：

background-image:-webkit-linear-gradient(#aaa,#bbb); 這是最簡單的線性漸變，因此寫起來也比較爽。

漸變方式：由上至下漸變，#aaa開始，#bbb結束

兼容瀏覽器的寫法：-webkit-linear-gradient，-moz-linear-gradient，-o-linear-gradient，linear-gradient

圓角：

border-radius:2px; 很少說，2像素弧度的圓角，對背景、邊框、圖片都適用。

不要小看這簡單的代碼，能夠當圓規使：

• 圓角矩形；
• 橢圓；
• 圓；
• 可選擇性圓角，border-radius:2px 0 0 2px;

圓角方式：border-radius: a b c d; 順序是：a=上左、b=上右、c=下右、d=下左；

具體怎麼個圓法，靠你練習了，這絕對是CSS3中最最經常使用到的一個屬性；

陰影：

box-shadow:len1 len2 len3 len4 color (inset); 詳解以下：

• len1：第1個長度值用來設置對象的陰影水平偏移值。可爲負值；
• len2：第2個長度值用來設置對象的陰影垂直偏移值。可爲負值；
• len3：若是提供了第3個長度值則用來設置對象的陰影模糊值。不容許負值；
• len4：若是提供了第4個長度值則用來設置對象的陰影外延值。不容許負值；
• color：設置對象的陰影的顏色。
• inset：設置對象的陰影類型爲內陰影。不設置時，則對象的陰影類型爲外陰影

高級用法：box-shadow:len1 len2 len3 len4 color (inset) , len5 len6 len7 color ; 屬性後能夠跟多個陰影配置，用逗號隔開。

box-shadow的實際應用至關普遍，不只可設置對象陰影，還可描邊、內發光等等，通常是做爲立體效果的按鈕。

和box-shadow相似的css3屬性text-shadow，設置文本陰影。

變換：

transition:property duration timing-function; 這是定義動畫的變換方式，也是css3動畫的核心。

property 能夠是：

• all – 表示對象內全部元素執行變換；
• none – 表示不執行變換；

duration 是設置整個變換所用的時間，格式：.2s 或 2s ；

timing-function 是設置變換效果，能夠是後面的任意一個：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默認值時easy；各個值的效果不一樣，各式各樣的變換效果能夠知足部分體驗的需求。

兼容瀏覽器的寫法：-webkit-transition，-moz-transition，-o-transition，transition

結語

css3確實很強大，但不要氾濫使用，恰到好處的使用css3會給交互帶來很好的體驗。

So，更多的瞭解和學習css3的各個屬性的使用方法是必須的，尤爲是用在移動開發上。

轉載請註明：大前端 ? 詳細解說：簡單CSS3實現炫酷讀者牆