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

时间:2023-03-08 22:22:43

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 */

aaarticlea/png;base64,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" alt="" />   aaarticlea/png;base64,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" alt="" width="90" height="73" />

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