首頁 > web前端 > css教學 > 主體

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

高洛峰
發布: 2016-11-24 13:51:22
原創
1336 人瀏覽過

陰影效果看起來當然帥,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陰影效果,相容性較好

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!