執行個體詳解CSS濾鏡(5)DropShadow屬性

來源:互聯網
上載者:User
ado|css|濾鏡|詳解 DropShadow屬性是為了添加對象的陰影製作效果的。它實現的效果看上去就像使原來的對象離開頁面,然後在頁面上顯示出該對象的投影。看一看它的運算式:

  Filter:DropShadow(Color=color,Offx=Offx,Offy=offy,
            Positive=positive)

  該屬性一共有四個參數: Color代表投射陰影的顏色。 Offx和offy分別X方向和Y方向陰影的位移量。位移量必須用整數值來設定。如果設定為正整數,代表X軸的右方向和Y軸的向下方向。設定為負整數則相反。
  Positive參數有兩個值:True為任何非透明像素建立可見的投影,False為透明的像素部分建立可見的投影。
  同樣,我們先來看一個例子(見下圖):

  看,圖中的文字就像是從頁面上飛出來一樣,並且留下了一層淡淡的影子。
  實際上在這裡應用的就是CSS的DropShadow屬性,我們來看一下它的代碼:

  <html>
   <head>
   <title>dropshadow </title>
   <style>//*定義CSS樣式*//
   <!--
   div {position:absolute;top:20;width:300;
   filter:dropshadow(color=#FFCCFF,offx=15,offy=10,positive=1);}
    -->
   //*定義DIV範圍內的樣式,絕對位置,投影的顏色為#FFCCFF,
    投影座標為向右位移15個像素,向下位移10個像素*//
   </style>
   </head>
   <body>
   <div>
   <p style=“font-family:matisse itc;font-size:64;
        font-weight:bold;color:#CC00CC;”>
   //*定義字型名稱、大小、粗細、顏色*//
   Love Leaf </p>
   </div>
   </body>
   </html>

  和chroma屬性一樣,Dropshadow屬性對圖象的支援不好,我指的是JPEG、GIF格式的圖象檔案。
  不能支援的原因與Chroma一樣,因為這種圖象的顏色很豐富,很難找到一個投射陰影的位置。



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.