Home  >  Article  >  Web Front-end  >  CSS implements div shadow effect with good compatibility

CSS implements div shadow effect with good compatibility

高洛峰
高洛峰Original
2016-11-24 13:51:221339browse

The shadow effect certainly looks cool. Firefox and Safari/Chrome support the box-shadow attribute through private properties. Box-shadow can achieve the shadow effect. However, IE does not support the box-shadow attribute, but the shadow effect can be achieved through the shadow filter.

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>

The effect is as follows:

CSS implements div shadow effect with good compatibility

css achieves div shadow effect with good compatibility" />

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn