CSS3 常用属性总结

CSS3常用属性总结

一、box-shadow

      定义：向框添加一个或多个阴影

     语法：

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

      eg:

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

二、gradient  渐变

      线性渐变：linear-gradient

1、在Mozilla的应用

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

     第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。

     第二个和第三个参数分别是起点颜色和终点颜色。

    eg:

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

2、在webkit的应用

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

3、在opera的应用

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

      径向渐变：radial-qradient 

三、filter   滤镜

        filter: none | <filter-function > [ <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