css實現div陰影製作效果,相容性較好

來源:互聯網
上載者:User
陰影製作效果看起來當然帥,firefox和safari/chrome通過私人屬性支援box-shadow屬性,box-shadow可以實現陰影製作效果,但是IE不支援box-shadow屬性,卻可以通過shadow濾鏡來實現陰影製作效果.

css"><style type="text/css">div {    width:500px; height:500px; margin:0px; background:#FFFFFF;/*第一個參數是x軸陰影段長度第二個參數是y軸陰影段長度第三個參數是往四周陰影段長度第四個參數是陰影段顏色*/    box-shadow:0px 0px 10px #CCCCCC;    -moz-box-shadow:0px 0px 10px #CCCCCC;    -webkit-box-shadow:0px 0px 10px #CCCCCC;/*direction 陰影角度 0°為從下往上 順時針方向 strength 陰影段長度*/    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=0, strength=6)\                progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=90, strength=6)\                progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=180, strength=6)\                progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=270, strength=6)";    *filter:progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=0, strength=6)            progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=90, strength=6)            progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=180, strength=6)            progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=270, strength=6);}</style><div>php點點通-www.phpddt.com</div>

效果如下所示:

css實現div陰影製作效果,相容性較好" />

  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.