亚洲欧洲国产欧美一区精品,激情五月亚洲色五月,最新精品国偷自产在线婷婷,欧美婷婷丁香五月天社区

      考試首頁 | 考試用書 | 培訓(xùn)課程 | 模擬考場(chǎng) | 考試論壇  
        當(dāng)前位置:設(shè)計(jì)制作 > CSS/HTML > 文章內(nèi)容
        

      CSS中陰影的運(yùn)用詳細(xì)說明

       [ 2017年6月27日 ] 【

      設(shè)計(jì)師常常使用一些獨(dú)特的字體效果和頁面效果,陰影是其中一個(gè),它可以讓頁面中的文字和元素具有立體的效果,從而被突出出來。比如對(duì)于文字陰影,傳統(tǒng)的方法可能需要將文字切出來,直接使用圖片,如果考慮SEO和網(wǎng)站性能,還可能會(huì)使用CSS Sprites等技術(shù)將圖片整合:
      h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...}

      h2#title1{background-position:0 -30px;}

      h2#title2{background-position:0 -60px;}

      .... 

      這是很棘手的事情,拼合圖片會(huì)花掉你的大量時(shí)間,而且為了實(shí)現(xiàn)更好視覺效果,你可能還要使用高質(zhì)量的32位png圖片,這又要讓你面對(duì)該死的IE 6的png透明問題!

      事實(shí)上,對(duì)于文字的陰影效果,我們完全可以用CSS來實(shí)現(xiàn)!

      可以查看 查看demo 先。

      Text-shadow

      text-shadow可以讓我們實(shí)現(xiàn)完美的文字陰影效果;緦懛ǎ

      text-shadow:[顏色 x軸 y軸 模糊半徑],[顏色 x軸 y軸 模糊半徑]...

      或者

      text-shadow:[x軸 y軸 模糊半徑 顏色],[x軸 y軸 模糊半徑 顏色]...

      這里的顏色就是陰影的顏色,你可以將顏色寫在前面,也可以寫在最后。x軸和y軸分別是其陰影的偏移位置,模糊半徑可以理解為陰影長度。而且現(xiàn)在大部分瀏覽器都支持多層陰影,你可以用逗號(hào)分開多組設(shè)置(當(dāng)然也可以只是用單個(gè)設(shè)置)。
      示例:
      h1{color:#000; background:#333; font:bold 24px/2 "微軟雅黑",Arial;

      text-indent:2em;

      text-shadow:black 2px 2px 2px; }

      效果如下圖

      #FormatImgID_0#

      該屬性目前被除IE之外的大部分瀏覽器支持,對(duì)于IE,我們可以使用shadow濾鏡來實(shí)現(xiàn):
      filter: Shadow(Color='black', Direction='135', Strength='2')

      你可能已經(jīng)注意到,使用shadow濾鏡只能定義角度 direction,而不能定義xy軸,z軸也被換成了strength。注意,使用該濾鏡的時(shí)候,不能夠設(shè)置背景顏色,否則濾鏡將無效!另外如果你的數(shù)學(xué)不是很好,不太懂三角函數(shù)的算法,你可以使用IE的另外一個(gè)濾鏡:dropshadow:

      filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');

      好吧,IE總是會(huì)拖我們的后腿,不過值得一提的是,IE的這兩個(gè)濾鏡是支持多層陰影的!比如,可以這樣寫:

      filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true')

      dropshadow(OffX=2, OffY=2, Color='yelow', Positive='true')

      dropshadow(OffX=2, OffY=2, Color='blue', Positive='true');

      欲了解更多關(guān)于IE的這兩個(gè)濾鏡,請(qǐng)查看:Shadow 和 Dropshadow

      讓我們看一個(gè)多層陰影的例子(這里無視了IE):

      h1{font:bold 32px/2 Verdana, Geneva, sans-serif; color:#f39;

      text-shadow:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}

      效果如圖:

      #FormatImgID_1#

      這里我們使用到了rgba色彩,它是一種在CSS中同時(shí)聲明顏色及其透明度的一種方法,且被大多數(shù)A級(jí)瀏覽器支持的色彩屬性(除了IE),了解更多請(qǐng)查看:《RGBa色彩的瀏覽器支持》——同時(shí)我們推薦對(duì)于純色半透明的情況使用這種簡(jiǎn)單的寫法。

      首頁 1 2 尾頁
      將考試網(wǎng)添加到收藏夾 | 每次上網(wǎng)自動(dòng)訪問考試網(wǎng) | 復(fù)制本頁地址,傳給QQ/MSN上的好友 | 申請(qǐng)鏈接 | 意見留言 TOP
      關(guān)于本站  網(wǎng)站聲明  廣告服務(wù)  聯(lián)系方式  站內(nèi)導(dǎo)航  考試論壇
      Copyright © 2007-2013 中華考試網(wǎng)(Examw.com) All Rights Reserved