本文摘自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怎么控制元素隐藏
使用css flexbox构建网站标题
css隐藏移动端滚动条并平滑滚动(代码示例)
css媒体查询有什么用
css 怎么引入图片文件
css nav-index属性怎么用
聊聊css 与 js 是如何阻塞 dom 解析和渲染的
css样式冲突怎么办
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css如何为div添加阴影效果