>  기사  >  웹 프론트엔드  >  CSS는 호환성이 좋은 div 그림자 효과를 구현합니다.

CSS는 호환성이 좋은 div 그림자 효과를 구현합니다.

高洛峰
高洛峰원래의
2016-11-24 13:51:221339검색

그림자 효과는 확실히 멋져 보입니다. Firefox 및 Safari/Chrome은 개인 속성을 통해 box-shadow 속성을 지원합니다. 그러나 IE는 box-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 그림자 효과를 구현합니다.

CSS는 호환성이 좋은 div 그림자 효과를 구현합니다." /> ;

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.