css如何让png图片添加阴影?

css如何让png图片添加阴影?,第1张

1、首先在我们这电脑桌面上找到ps并点击它。

2、然后我们需要新建一个带有图片的图层。

3、接着我们需要点击魔棒工具。

4、然后点击图片中的空白区域。

5、接着我们需要点击投影,这一点很重要。

6、最后设定好我们的投影信息并点击确定就可以让png图片添加阴影了。

可以用CSS3的阴影属性。 不过要支持IE6的话,加载个 .htc 行为文件就好了。border: 1px solid #696padding: 60px 0text-align: centerwidth: 200px-webkit-box-shadow: #666 0px 0px 10px-moz-box-shadow: #666 0px 0px 10pxbox-shadow: #666 0px 0px 10pxbackground: #EEFF99behavior: url(/PIE.htc)。\x0d\x0a直接使用box-shadow:5px 5px 10px black inset属性设置样式样式就可以了。前两个值(5px 5px)是水平和垂直方向的偏移量,正值阴影就会向左向下偏移,负值反之;第三个值(10px)是设置模糊距离;black就是阴影的颜色啦;最后一个inset是在元素内部创建一个阴影,也就是内阴影了;删除掉inset就是设置外阴影了。\x0d\x0a这是使用纯CSS实现的效果,在DIV层的区域边框添加阴影效果,看上去非常形象,但是实现起来并不是太难,CSS代码比较简洁,值得我们学习。盒子阴影的CSS实现方法

在网页中插入图片是再平常不过的事情了,但更多的时候为了美观的需要,要给图片加上阴影,图片数量较多的时候,工作量是非常大的。重复劳动而且没有工作效果。有没有办法用CSS给图片加阴影呢?

CSS中有一个概念大家应该都不陌生,那就是相对定位position:relative。应该学会灵活的运用CSS所提供的属性。给图片加阴影就可以用position:relative相对定位的办法来实现。关于position属性可以参考这里。

看下面的css代码:

.waiwei {

position:relative

background:#eee

margin:0 auto

width:200px

}

.tupian {

background:#fff

border:1px solid #c00

padding:0

position:relative

top:-5px

left:-5px

}

.tupian img {

vertical-align:bottom/*去除图片下方的空隙*/

}


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11783235.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存