这篇文章主要介绍“怎么在CSS中设置图片阴影”，在日常操作中，相信很多人在怎么在css中设置图片阴影问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么在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) 改为内部阴影。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
img {
box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
-WEBkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<img src="img/1.jpg" width="200" />
</body>
</html>
2、使用filter:drop-shadow()
filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。
drop-shadow()可给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。
语法：filter:drop-shadow(h-shadow v-shadow blur spread color);
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
img {
-webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));
filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));
}
</style>
</head>
<body>
<img src="img/1.jpg" width="200" />
</body>
</html>
到此，关于“怎么在css中设置图片阴影”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
--结束END--
本文标题: 怎么在css中设置图片阴影
本文链接: https://lsjlt.com/news/85849.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0