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);

 

posted @ 2015-01-15 19:52  夏至未至-夜未央  阅读(223)  评论(0编辑  收藏  举报