本文摘自PHP中文网,作者V,侵删。
本文为大家分享了css为div添加阴影的方法,希望可以帮助到大家。
(相关推荐:CSS教程)
代码实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <style type= "text/css" >
.mydiv{
width : 250px ;
height : auto ;
border : #909090 1px solid ;
background : #fff ;
color : #333 ;
filter:progid:DXImageTransform.Microsoft.Shadow(color= #909090 ,direction= 120 ,strength= 4 );
-moz-box-shadow: 2px 2px 10px #909090 ;
-webkit-box-shadow: 2px 2px 10px #909090 ;
box-shadow: 2px 2px 10px #909090 ;
}
</style>
for IE:
direction 阴影角度 0 °为从下往上 顺时针方向
strength 阴影段长度
-moz-box-shadow: 2px 2px 10px #909090 ;
-webkit-box-shadow: 2px 2px 10px #909090 ;
box-shadow: 2px 2px 10px #909090 ;
第一个参数是x轴阴影段长度
第二个参数是y轴阴影段长度
第三个参数是往四周阴影段长度
第四个参数是阴影段颜色
div代码:
<div class= "mydiv" >
123123213123
</div>
|
以上就是css如何为div添加阴影效果的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
外部调用css不显示怎么办
css背景超出宽度怎么办
css hover失效怎么办
css如何显示文字的上标和下标
css注释的两种写法是什么
浅谈css如何实现九宫格提示超出数量
css如何设置字体
css怎么隐藏input
浅谈css的background背景属性
css如何让文字成排显示
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css如何为div添加阴影效果