怎么在css中设置图片阴影

这篇文章主要介绍“怎么在css中设置图片阴影”，在日常操作中，相信很多人在怎么在css中设置图片阴影问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么在css中设置图片阴影”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联公司是由多位在大型网络公司、广告设计公司的优秀设计人员和策划人员组成的一个具有丰富经验的团队，其中包括网站策划、网页美工、网站程序员、网页设计师、平面广告设计师、网络营销人员及形象策划。承接：成都做网站、网站制作、成都外贸网站建设、网站改版、网页设计制作、网站建设与维护、网络推广、数据库开发,以高性价比制作企业网站、行业门户平台等全方位的服务。

设置方法：1、使用“box-shadow: 水平阴影 垂直阴影 blur spread color inset;”语句；2、使用“filter:drop-shadow(水平阴影 垂直阴影 blur spread color)”语句。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css中设置图片阴影有两种方法：

• box-shadow属性

• filter:drop-shadow()

1、使用box-shadow属性

box-shadow 属性向框添加一个或多个阴影。

语法：box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow    必需。水平阴影的位置。允许负值。

• v-shadow    必需。垂直阴影的位置。允许负值。

• blur    可选。模糊距离。

• spread    可选。阴影的尺寸。

• color    可选。阴影的颜色。请参阅 CSS 颜色值。

• inset    可选。将外部阴影 (outset) 改为内部阴影。

示例：

2、使用filter:drop-shadow()

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

drop-shadow()可给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。

语法：filter:drop-shadow(h-shadow v-shadow blur spread color);

示例：

到此，关于“怎么在css中设置图片阴影”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

当前标题：怎么在css中设置图片阴影
转载来于：http://cdiso.cn/article/pscshd.html