2018-03-19 html中的常用兼容性写法总结

1，向框添加一个或多个阴影

box-shadow: 10px 10px 5px #888888;

语法

box-shadow:h-shadowv-shadowblurspreadcolorinset;

2，css3 text-shadow字体阴影

        -webkit-text-shadow:0 0 10px #c06;

           -moz-text-shadow:0 0 10px #C06;

               -o-text-shadow:0 0 10px #C06;

                    text-shadow:0 0 10px #c06;

        filter: Shadow(Color='green', Direction='135', Strength='6')/*Color设置阴影颜色  Direction阴影的方向，取值为0即零度（表示向上方向），45为右上，90为右，135为右下，180为下方，225为左下方，270为左方，315为左上方；   Strength就是 范围，类似于text-shadow中的模糊半径值*/

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

多阴影----加边例子（逗号隔开） ：

.kind1{ text-shadow: 0px 0px 2px green,

0px 0px 3px blue,

0px 0px 4px red;

font-size:38px; color:yellow; }

类似于火焰   

          .fire{ font-size:40px; font-weight:bold;  background:#000; text-align:center; padding:24px;   

              text-shadow:0 0 4px white,    

                                0 -5px 4px #ff3,   

                                3px -10px 6px #fd3,    

                                -3px -15px 11px #C90,   

                                3px -25px 18px #f20;

                         /* 4px -35px 28px #C30;*/

     }

3D

.threeD{ color:#fff;  text-shadow: 0 0 1px #999, 

1px 1px 2px #888, 

2px 2px 2px #777, 

3px 3px 2px #666, 

4px 4px 2px #555, 

5px 5px 2px #333;

}

3，Text Stroke(文本描边)和text-fill-color(文本填充色)  这两个属性只有webkit内核的Safari和Chrome支持

例如： -webkit-text-stroke: 3.3px #2A75BF;

4，圆角设置；IE不支持Box Shadow(阴影)，左上、左下、右上、右下四个方向可以分别设置

-moz-border-radius:2em; 

-webkit-border-radius:2em; 

border-radius:2em;

5，webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 

-webkit-gradient(linear,0% 0%, 0% 100%, from(#999999), to(#333333), color-stop(0.5,#336600))；

-moz-linear-gradient(0% 0% 270deg, #999999,#333333, #336600 50%)；

background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );

background-image:linear-gradient(left top, red 100px, yellow 200px);

ie下可以使用渐变滤镜，请参阅： http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx

background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/

background:-webkit-gradient(linear,050%,100%50%,from(#ace),to(#f96));/*Old gradient for webkit*/

background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/

background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/

6，径向渐变 radial-gradient

background:radial-gradient(red, yellow,rgb(30,144,255));

重复的渐变

background:repeating-linear-gradient(-45deg, red, red5px, white5px, white10px);

background-color:#000;background-image:repeating-linear-gradient(90deg, transparent, transparent50px,rgba(255,127,0,0.25)50px,rgba(255,127,0,0.25)56px, transparent56px, transparent63px,rgba(255,127,0,0.25)63px,rgba(255,127,0,0.25)69px, transparent69px, transparent116px,rgba(255,206,0,0.25)116px,rgba(255,206,0,0.25)166px),repeating-linear-gradient(0deg, transparent, transparent50px,rgba(255,127,0,0.25)50px,rgba(255,127,0,0.25)56px, transparent56px, transparent63px,rgba(255,127,0,0.25)63px,rgba(255,127,0,0.25)69px, transparent69px, transparent116px,rgba(255,206,0,0.25)116px,rgba(255,206,0,0.25)166px),repeating-linear-gradient(-45deg, transparent, transparent5px,rgba(143,77,63,0.25)5px,rgba(143,77,63,0.25)10px),repeating-linear-gradient(45deg, transparent, transparent5px,rgba(143,77,63,0.25)5px,rgba(143,77,63,0.25)10px);

重复的径向渐变

background:repeating-radial-gradient(black, black5px, white5px, white10px);