Css3阴影

来源：互联网发布：mac照片导入lightroom 编辑：程序博客网时间：2024/05/17 09:21

为元素添加阴影通过：box-shadow 属性

语法：

box-shadow:h-shadow v-shadow blur spread color inset;

解释：

h-shadow：必须写，这是水平阴影的位置，可以是负数。

v-shadow：必须写，这是垂直阴影的位置，可以是负数。

blur：可选值，这是模糊的距离，不明白一会可以修改下面示例的参数。

spread：可选值，阴影的大小，不明白一会可以修改下面示例的参数。

color：可选，阴影的颜色。

inset：可选，写上就是内侧阴影，不谢就是默认外侧阴影。

下面是我写的例子，将就看一下：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Css3阴影效果</title><style type="text/css">#demo{width: 800px;height: 500px;background: #999;margin: 20px auto;}#demo>div{display: inline-block;width: 360px;height: 400px;line-height: 400px;text-align: center;color: white;font-family: cursive;font-size: 25px;margin-top: 50px;}.demo-top{background: red;margin-left: 30px;margin-right: 20px;box-shadow: 0px 7px 28.8px 3.2px black;}.demo-bottom{background: orange;box-shadow: 0px 7px 28.8px 3.2px red inset;}</style></head><body><div id="demo"><div class="demo-top">这是阴影向外效果</div><div class="demo-bottom">这是阴影向内效果</div></div></body></html>

阅读全文

1 0