资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

css给图片添加阴影的方法有哪些

css给图片添加阴影的方法有哪些?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了英山免费建站欢迎大家使用!

首先我们来看看css给图片添加阴影效果的第一种方法:设置box-shadow属性,通过一个简单的代码示例来看看box-shadow属性的实现方法。



	
		
		css 图片阴影--box-shadow属性
		
	
	
		

效果图:

css给图片添加阴影的方法有哪些

box-shadow属性设置图片阴影是不是很简单,下面我们来看看box-shadow属性的是如何设置的:

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

h-shadow:必需设置的值,定义水平阴影的位置。允许负值。

v-shadow:必需设置的值,定义垂直阴影的位置。允许负值。

blur:可选设置的值,定义模糊距离。

spread:可选设置的值,定义阴影的尺寸。

color :可选设置的值,定义阴影的颜色。如果没有设置值,颜色值基于浏览器显示,建议设置。

inset:可选设置的值,设置后可将外部阴影 (outset) 改为内部阴影。

接下来我们来看看css给图片添加阴影效果的第二种方法:使用css3的滤镜属性-----filter 属性设置图片阴影。

可以设置filter:drop-shadow();来给图片添加阴影,我们来通过一个简单的代码示例看看实现方法。



	
		
		css 图片阴影--box-shadow属性
		
	
	
		

效果图:

css给图片添加阴影的方法有哪些

说明:

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

h-shadow:设置阴影的水平方向偏移量;允许负值,负值会使阴影出现在元素左边。

v-shadow:设置阴影的垂直方向偏移量;允许负值,负值会使阴影出现在元素上方。

blur:设置阴影的模糊度,值越大,越模糊,阴影也就会变得更大更淡;不允许负值,若未设定,默认是0 (阴影的边界很锐利)。

spread:设置阴影的尺寸,正值会使阴影扩张和变大,负值会是阴影缩小;若未设定,默认是0 (阴影会与元素一样大小)。
       注:在Webkit以及其他一些浏览器中不支持spread,如果加了也不会渲染。

color:设置阴影颜色;若未设定,颜色值基于浏览器,建议设置颜色。

感谢各位的阅读!看完上述内容,你们对css给图片添加阴影的方法有哪些大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联行业资讯频道。


网站栏目:css给图片添加阴影的方法有哪些
链接地址:http://cdkjz.cn/article/pjohhj.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220