新建一个html文件 ， 定名为test.html ， 用于讲解若何用CSS实现DIV块的暗影结果 。
文章插图
2在test.html页面中 ， 建立一个div ， 并设置其class属性为con ， 本家儿要用于下面临其进行样式界说 。
文章插图
3在test.html页面中利用css设置div的宽度为300px ， 高度为300px ， 代码如下：
文章插图
4在test.html页面中利用css设置div居中对齐 ， 并设置其布景颜色为白色 ， 代码如下：
文章插图
5在test.html页面中利用box-shadow设置div的暗影结果 ， 每个参数的意思如下：
第一个参数是x轴暗影段长度；
第二个参数是y轴暗影段长度；
第三个参数是往周围暗影段长度；
第四个参数是暗影段颜色 。
文章插图
6为了兼容所有的浏览器 ， 如IE浏览器、火狐浏览器等 ， 需要利用下面的方式再设置div的暗影结果 ， 代码如下：
文章插图
7【如何用CSS实现DIV块的阴影效果】在浏览打开test.html页面 ， 查看实现暗影的结果 。
文章插图
以上内容就是如何用CSS实现DIV块的阴影效果的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- 如何在网上看CCTV央视的一线节目回放视频
- CSS怎样设置div布局居中，但是里面的内容不居中
- 手动挡汽车如何起步不熄火
- 教你如何疏通蹲坑
- 自己如何修指甲方法
- 男生如何有效避免仙人跳
- 如何释放身体里的静电？
- 如何使用自动取款机
- 如何将断了的电线头接在一起
- 如何去除汽车挡风玻璃上的冰