114◆籌8章柔化視覺體驗(yàn)     float:left ;     background-image:   u rl (iimages/awesomeconf.jpgi) background-position: center, height: 240px;}#badge{ text-align: center; width: 200px; border: 2px solid blue;}#info{ margin: 20px; padding: 20px width: 660px; height: 160px}#badge, #info{  float: left;  background-color: #fff;}#badge h2{ margin: 0; color: red; font-size: 40px}#badge h3{ margin: 0; background-color: blue color: #fff;}    對頁面應(yīng)用上述樣式表后，可以使標(biāo)志與內(nèi)容區(qū)域并排顯示，如圖8-4所示。接下來讓我們來修飾標(biāo)志。圖8-4橫幅廣告初稿8.2.2增加漸變8.2實(shí)例18:使用陰影、漸變和變換●115    修改標(biāo)志的定義，將其背景色由白色改為從白到淺灰的漸變色。漸變樣式在Firefox、Safari和Chrome中都會(huì)被支持，但是特定于Firfox的實(shí)現(xiàn)方法卻不同。Chrome和Safari都使用Webkit的語法，按最原始方案來實(shí)現(xiàn)，而Firefox使用的語法與W3C方案的類似。同樣，需要使用瀏覽器前綴（參見8.1.2節(jié)）。。 Download css3banner/st/le.css#badge{ background-image: -moz-linear-gradient(   top, #fff, #efefef  );background-image: -webkit-gradient(  linear,left top, left bottom,  color-stop(0, #fff),  color-stop(l, #efefef));    background-image: linear-gradient(    top，#fff，#efefef    )；    )    Firefox使用-moz-linear-gradient方法，該方法中需要指定漸變的起始點(diǎn)位置、起點(diǎn)的顏色和終點(diǎn)的顏龜。    基于Webkit內(nèi)核的瀏覽器允許我們設(shè)置中間節(jié)點(diǎn)的顏色。在本例中濟(jì)南網(wǎng)頁設(shè)計(jì)只需要從白色漸

變到灰色，但如果還需要漸變到其他顏色，那么只需要增加一個(gè)新的中間節(jié)點(diǎn)顏色就可以了。8.2.3給標(biāo)志加上陰影    為標(biāo)志加陰影也很簡單。加上陰影可以使其看起來像是突顯在橫幅廣告的前面，增加立體感。傳統(tǒng)的做法是使用Photoshop給圖片加上陰影或者以背景圖片的形式插入陰影，而使用CSS3的box-shadow屬性，可以輕松地為頁面元素實(shí)現(xiàn)陰影效果。。    將該屬性加入到樣式表中，為標(biāo)志增加陰影效果：Download css3banner/style.css#badge{①參見 http://dev.w3.org/csswg/css3-images/#linear-gradients。②參見 http://www.w3.org/TR/css3-background/#the-box-shadow。116◆第8章柔化視覺體驗(yàn)    -moz-box-shadow: 5px 5px 5px #333;    -webkit-box-shadow: 5px 5px 5px #333;    -o-box-shadow:  5px 5px 5px #333;    box-shadow: 5px 5px 5px #333;    )    box-shadow屬性有4個(gè)參數(shù)。第一個(gè)是水平偏移量，正數(shù)代表陰影會(huì)出現(xiàn)在目標(biāo)元素的右邊，負(fù)數(shù)代表陰影會(huì)出現(xiàn)在元素左邊。第二個(gè)參數(shù)是垂直偏移量，正數(shù)代表陰影會(huì)出現(xiàn)在目標(biāo)元素的下面，負(fù)數(shù)代表出現(xiàn)在目標(biāo)元素的上面。    第三個(gè)參數(shù)是模糊半徑。值為0的時(shí)候，陰影看起來非常清晰尖銳。值越大，陰影越模糊。最后一個(gè)參數(shù)定義了陰影的顏色。    我們需要不停地調(diào)整這些參數(shù)，來體會(huì)其工作原理，并找到那組適合我們的參數(shù)。當(dāng)使用陰影時(shí)，需要首先調(diào)研一下現(xiàn)實(shí)生活中陰影的原理。用一束光照射在物體上，或者到外面去觀察陽光下物體的陰影。這個(gè)調(diào)研非常重要，因?yàn)槿绻麆?chuàng)建了一些不協(xié)調(diào)的陰影，尤其是對多個(gè)元素使用了不正確的陰影時(shí)，會(huì)使用戶界面顯得更加混亂。最簡單的方法是，對每個(gè)元素的陰影都使用相同的設(shè)置。文本上的陰影    除了對元素增加陰影樣式，對文本也可以添加陰影效果。這與box-shadow糞似：    hl{text-shadow: 2px 2px 2px #bbbbbb;)    需要定義X.】，方向的偏移量、模糊度和陰影的顏色。IE6. IE7和IE8中也已經(jīng)通過使用Shadow過濾器支持文本陰影：    filter: Shadow(Color=#bbbbbb,    Di rection=135．    Strength=3)；    這與在元素上應(yīng)用陰影的方法是一樣的。文本上的陰影會(huì)帶來一種精致的效果，但是如果陰影太重的話會(huì)讓文本變得不容易閱讀。8.2.4旋轉(zhuǎn)標(biāo)志    我們可以使用CSS3的變換來旋轉(zhuǎn)、縮放、傾斜元素，就像使用矢量圖像程序Flash、Illustrator.  Inkscape -樣。。旋轉(zhuǎn)可以使元素更突出，使Web頁面看起來不再四四方方。讓我們見 http://www.w3 .org/TR/c ss3 -2d-trans forms/#transform-propertY 。