新建一个html文件,定名为test.html,用于讲解若何用CSS实现DIV块的暗影结果。
在test.html页面中,建立一个div,并设置其class属性为con,本家儿要用于下面临其进行样式界说。
在test.html页面中利用css设置div的宽度为300px,高度为300px,代码如下:
在test.html页面中利用css设置div居中对齐,并设置其布景颜色为白色,代码如下:
在test.html页面中利用box-shadow设置div的暗影结果,每个参数的意思如下:
第一个参数是x轴暗影段长度;
第二个参数是y轴暗影段长度;
第三个参数是往周围暗影段长度;
第四个参数是暗影段颜色。
为了兼容所有的浏览器,如IE浏览器、火狐浏览器等,需要利用下面的方式再设置div的暗影结果,代码如下:
在浏览打开test.html页面,查看实现暗影的结果。
0 篇文章
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!