Beauty CSS(6)-CSS好方便

CSS最方便的地方之一在於圓角陰影等外觀上的設定,可以減少依賴圖片,達到讀取速度加快,重點是語法打一打就不用一直存圖縮圖啦xD以下紀錄一些外觀上面的設定。如有誤還請指正,謝謝。

說到CSS外觀部份的進步就不能不提到圓角跟陰影啦,以前要作這個還要費心存成png檔,遇到IE6還要存成gif檔,但是效果也不好(還好現在公司已經不管IE6了)但是圖檔的修改還是頗費心費時,如果又遇到人客的要求:『陰影淡個10趴』、『框線淡個50趴』、『圓角再方一點』….,相信沒有人不會發瘋的!這時候CSS3簡直是救星囉~

因為各家瀏覽器支援度的問題,目前語法部份都還需要加上前綴詞:
Chrome, Safari:-webkit-
Firefox:-moz-
IE:-ms-
Opera:-o-
雖然不是很方便,但以後瀏覽器應該會漸漸淘汰,在這之前還是乖乖的用吧Q_Q
另外除了加前綴以外,最後還是要把不含前綴的屬性&值加上,這樣日後即使瀏覽不支援前綴詞還是可以讀到正確的設定。
真的真的非常怕麻煩的人也可以試試這個:prefixfree

border-radius
首先是圓角,可以針對四個邊作不同的圓度設定喔~依序是上左 / 上右 / 下右 / 下左:

如果是兩個值,位置是上左, 下右 / 上右, 下左

三個值:上左 / 上右, 下左 / 下右

box-shadow
物件陰影,設定值可以有水平偏移(x)、垂直偏移(y)、模糊強度(blur)、擴散強度 (spread)、陰影顏色(hex or rgba)、內陰影 (inset)
其中水平 / 垂直偏移一定要設定以外,其他可以放水流(誤)可以不用設定。

text-shadow
文字陰影,其設定值有有水平偏移(x)、垂直偏移(y)、模糊強度(blur)、陰影顏色(hex or rgba)。

rbga
可以調整背景色或字色的透明度,背景調淡再也不用改圖囉~R、G、B、A四值分別代表紅色 / 綠色 / 藍色 / 透明度。

gradient
漸層也是一個好用的語法,有了漸層以後再也不用擔心背景圖要怎麼切才不會斷掉!
有以下幾種漸層方式:由上到下、由左到右、圓形等呈現方式。

linear-gradient就是線性漸層,可以增加起始位置的值。而不作其他設定就是預設從上到下的漸層。
更活用的是可以設定漸層以及多種顏色,跟彩虹一樣~

在顏色前面增加結束位置,可以決定橫向 / 直向的漸層。

圓形的漸層則是radial-gradient。

本文同步發表於http://ithelp.ithome.com.tw/question/10138626

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Time limit is exhausted. Please reload the CAPTCHA.