00002、div的文字垂直居中与背景的渐变

1.div可以放多行的文字，当显示文字较少时，文字可垂直居中

    text-align: center;
    display: table-cell;
    vertical-align: middle;
    text-overflow: ellipsis;

2.div的背景色设置为渐变，使效果看起来更像一个按钮(现在默认为绿色)

    background-color: #008000; /* 如果浏览器不支持渐变，使用图像作为背景 */
    background: -o-linear-gradient(top,#11f9d0, #0B680B);/* Opera 11.10+ */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#11f9d0), to(#0B680B)); /*Webkit: Safari 4-5, Chrome 1-9*/ 
    background: -ms-linear-gradient(top, #11f9d0, #0B680B);/* Webkit: Safari 5.1+, Chrome 10+,火狐,IE 10  */ 
    background: -moz-linear-gradient(top , #11f9d0, #0B680B) repeat scroll 0% 0% transparent;/* Firefox 3.6+ */
    FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#33ffff, endColorStr=#0B680B); /*IE < 10 */ 

   

3.div的文字进行描边(文字的颜色为橙色，描边的颜色为黑色色)

    -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;  
    -moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;  
    text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; /* 火狐,Chrome */ 
　　 filter:Dropshadow(offx=1,offy=0,color=red)
        Dropshadow(offx=0,offy=1,color=red)
        Dropshadow(offx=0,offy=-1,color=red)
        Dropshadow(offx=-1,offy=0,color=red); /*IE 10*/
　  *filter: Glow(Color=#000, Strength=1); 

 

转载于:https://www.cnblogs.com/zhang-12759/p/4227153.html