您的位置首页生活百科

CSS教程 盒子阴影(box-shadow)

CSS教程 盒子阴影(box-shadow)

的有关信息介绍如下:

CSS教程 盒子阴影(box-shadow)

本教程将介绍盒子阴影(box-shadow)

新建一个 BoxShadow.html 文件,如图所示:

输入HTML5的结构代码,将title标签里面的内容修改成:盒子阴影(box-shadow),如图所示:

box-shadow属性的作用:用于设定一个盒子的阴影效果,形式如图所示:

使用div标签定义一个宽300px,高200px的盒子,如图所示:

输入代码:box-shadow:10px 10px rgba(255, 0, 0, 0.1)

运行网页,可以看到盒子底下出现了阴影,如图所示: