如何用CSS实现DIV块的阴影效果

新建一个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

    在浏览打开test.html页面,查看实现暗影的结果。

    • 发表于 2019-09-17 23:12
    • 阅读 ( 995 )
    • 分类:其他类型

    你可能感兴趣的文章

    相关问题

    0 条评论

    请先 登录 后评论
    联系我们:uytrv@hotmail.com 问答工具