CSS3常用屬性總結

一、box-shadow

      定義：向框新增一個或多個陰影

     語法：

       box-shadow: h-shadow v-shadow blur spread color inset;

      box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)

      線性漸變：linear-gradient

1、在Mozilla的應用

   -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop
 
> [, <stop>]* )

     第二個和第三個引數分別是起點顏色和終點顏色。

    eg:

   background: -moz-linear-gradient( top,#ccc,#000);

   -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
 

   -o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>])

      徑向漸變：radial-qradient 

三、filter   濾鏡

        filter: none | <filter-function > [ <filter-function> ]*    

1. grayscale  灰度     預設值100%       

     .grayscale
    
   {
             -webkit-filter:grayscale(a);
         } 

   
   
2. sepia   褐色     預設值100%   

     .sepia{
             -webkit-filter:sepia(a);
         } 

   
   
3. saturate  飽和度     預設值100%   

     .saturate{
             -webkit-filter:saturate(a);
         } 

   
   
4. hue-rotate   色相旋轉    預設值0deg    

    .hue-rotate{
              -webkit-filter:hue-rotate(a);
          }

   
   
5. invert    反色    預設值100%  

     .invert{
               -webkit-filter:invert(a);
           }

   
   
6. opacity     透明度     預設值100%  

    .opacity{
           -webkit-filter:opacity(a);
         }

   
   
7. brightness   亮度  預設值100%  

      .brightness{
               -webkit-filter:brightness(a);
           }

   
   
8. contrast     對比度    預設值100%

   .contrast{
               -webkit-filter:contrast(a);
           }

   
   
9. blur      模糊      預設值0  

      .blur{
               -webkit-filter:blur(apx);
           }

   
   
10. drop-shadow     陰影    

    .drop-shadow{
                -webkit-filter:drop-shadow(apx apx apx color);
            }

四、box-sizing 指定盒子屬性模型

       box-sizing：content-box(default)

       box-sizing：border-box

       box-sizing：padding-box