使用簡單的CSS3屬性實現(xiàn)炫酷讀者墻效果
2024-07-11 08:51:58
供稿：網(wǎng)友
使用基礎的Html和CSS寫出雛形 需要一提的是頭像（img）的排版。給外面a標簽padding-left:;，img自身float:left;margin-left:;，這種寫法避免了不少因浮動產(chǎn)生的問題，且代碼簡明，推薦適當?shù)氖褂么朔椒ā?
使用并解說所用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像素弧度的圓角，對背景、邊框、圖片都適用。
不要小看這簡單的代碼，可以當圓規(guī)使：
圓角矩形； 橢圓； 圓； 可選擇性圓角，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：設置對象的陰影類型為內(nèi)陰影。不設置時，則對象的陰影類型為外陰影 高級用法：box-shadow:len1 len2 len3 len4 color (inset) , len5 len6 len7 color ; 屬性后可以跟多個陰影配置，用逗號隔開。
box-shadow的實際應用相當廣泛，不僅可設置對象陰影，還可描邊、內(nèi)發(fā)光等等，一般是作為立體效果的按鈕。
和box-shadow類似的css3屬性text-shadow，設置文本陰影。
變換： transition:property duration timing-function; 這是定義動畫的變換方式，也是css3動畫的核心。
property 可以是：
all – 表示對象內(nèi)所有元素執(zhí)行變換； none – 表示不執(zhí)行變換； 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
