ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS は互換性の高い div シャドウ効果を実装します
CSS は互換性の高い div シャドウ効果を実装します
- 高洛峰オリジナル
- 2016-11-24 13:51:221357ブラウズ
シャドウ効果は確かにクールです。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 シャドウ効果を実現します" />
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。