5個CSS3技術實現設計加強

    層疊樣式表(css)是Web設計的一種語言，CSS的下一代版本CSS3已經蓄勢待發。你是否可望開始使用它們卻又不知從何下手呢？雖然還有一些新屬性沒有獲得官方的確認，可是一些瀏覽器已經開始支持來自CSS3得新特性了。
但問題是——許多瀏覽器支持了，惟獨最主要的Internet Explorer瀏覽器仍不支持！
不少人尤爲是中國的前端er們會以爲既然IE不支持，那就先不關心CSS3。其實不該這樣的，CSS3如今能爲咱們帶來什麼好處呢？至少如今咱們就能使用那些CSS3的新特性來進行設計加強。

設計加強是指在不影響網站可用性的基礎上，使用一些高級樣式來提高網站的視覺效果。

其實對於如何區分設計加強與不影響可用性的區別仍是有必定的困難的:

• 設計加強的例子：使用border-radius屬性爲盒模型添加圓角，讓網站更富有吸引力。不過，即便圓角屬性不被瀏覽器支持，它也不會影響網站的正常使用。
• 設計消弱可用性的例子：在某個元素上面層疊了一個使用了RGBA顏色值背景的元素，上面的元素使用半透明效果，很顯然這兩個元素都是必須讓用戶看到的。很顯然，有一部分使用舊瀏覽器的用戶想要看到下面的元素內容是很困難的，這種設計就下降了可用性。

　　如下是在應用CSS3設計加強以前的普通效果:

1.透明顏色

目前支持的瀏覽器:Apple Safari 4, Firefox 3.0.5+, Google Chrome 1+

RGBA容許你控制某個特性填充顏色的不透明度，不管是文本、背景、邊框仍是背景顏色。

設置顏色透明度的時候，你須要使用RGB顏色值，不能夠再使用十六進制值，而那個」A」則表明透明度，你能夠設置從0(透明)到1(不透明)之間的數值。

rgba(0-255,0-255,0-255,0-1)

你還能夠單獨使用RGB值:

.topbox {
    color: rgb(235,235,235);
    color: rgba(255,255,255,0.75);
    background-color: rgb(153,153,153);
    background-color: rgba(0,0,0,0.5);
    border-color: rgb(235,235,235);
    border-color: rgba(255,255,255,0.65);
}

有個好消息就是至少你可使用CSS濾鏡單獨針對IE瀏覽器設置背景顏色。

點擊圖片查看清晰大圖
注:因爲Wordpress不能顯示以上代碼，因此將其弄成圖片，因此你須要自行寫以上代碼了哦。

2.圓角

目前支持的瀏覽器:Apple Safari 3+, Firefox 1+, Google Chrome 1+

邊框半徑用於設置和模型每一個角的曲率，彷彿有一對與特定的角落虛圓半徑(r):

border-radius: r;

雖然border-radius是將來CSS3的一部分，不過如今不管Mozilla(Firefox)和Webkit(Safari和Chrome)都已經有了本身的圓角版本。

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

你也能夠單獨設置某個角的半徑:

CSS3	Mozilla	WebKit
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
border-radius	-moz-border-radius	-webkit-border-radius

3.文字陰影

目前支持的瀏覽器:Apple Safari 3+, Firefox 3.0.5+, Google Chrome 1+

爲文本添加陰影效果，控制陰影左/右和上/下的偏移，還能夠設置陰影的顏色。

text-shadow: x y blur color;

你能夠結合透明顏色值來設置文字陰影的明暗:

text-shadow: -2px 2px 10px rgba(0,0,0,.5);

你還可讓文字有多個陰影，每一個陰影屬性使用逗號分隔:

text-shadow:   0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 
15px -4px 3px rgba(255,0,0,.75);

4.盒陰影

目前支持的瀏覽器:Apple Safari 4+, Firefox 3+, Google Chrome 1+

爲某個和元素添加陰影的CSS3屬性聲明格式與文本陰影相同:

box-shadow: x y blur color;

和文本陰影同樣，Mozilla 和 Webkit 也有他們本身的盒陰影規則:

-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);

你也能夠爲某個盒元素添加多個陰影，仍然是使用逗號分隔。

-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 
15px -20px 20px rgba(255,0,0,.75);
-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);
box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);

5.多背景圖

目前支持的瀏覽器:Apple Safari 1.3+, Google Chrome 1+

爲某個單一元素添加多個背景圖的話僅須要爲不一樣的背景圖聲明之間添加都好來分隔開。固然，你還要爲其它瀏覽器準備一張完整的圖片。

background-image: url(astro-127531.png);
background-image: url(astro-127531.png),url(Hubble-112993.png);
background-repeat: no-repeat;
background-position: bottom left;
background-position: bottom left, top right;

「買五送一」-旋轉任何元素

目前支持的瀏覽器:Apple Safari 4+, Firefox 3.5+, Google Chrome 1+

雖然它目前不算是CSS3中的一部分，但Webkit已經有了它本身的一套變形屬性，Mozilla也在效仿。變形包含了不少不一樣類型的值，不過其中最有意思也是最有用的就是旋轉了。

-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);

下圖爲不支持CSS3的瀏覽器所呈現出來的樣子(如Opera 9):

須要使用Safari 4+, Firefox 3.5+, or Chrome 1+瀏覽器看效果：

轉載：http://blog.bingo929.com/power-of-html5-css3-div-css.html