CSS如何实现阴影效果
2019-08-14 09:38:27来源:爱站网 阅读 ()
? ? ? ?阴影效果可以给平图设计增加一些纵深的感觉,大部分我们都是使用PhotoShop直接制作带阴影的图片,但是我们除了可以在PhotoShop完成以为还可以通过CSS来实现,那么CSS如何实现阴影效果呢?
? ? ? ?原理:
? ? ? ?给<img />标签增加一个容器, 给容器设置一个大的阴影背景图像, 然后把<img />利用负值外补丁进行偏移, 使阴影落在图像外侧以达到效果.
? ? ? ?备用的阴影图像 shadow.gif
? ? ? ?HTML代码如下:
<div class="image_shadow">
<img src="../images/origin_image.jpg" alt=""/>
</div>
? ? ? ?CSS代码如下:
.image_shadow{position:relative;float:left;clear:right;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow img{position:relative;display:block;margin:-5px 5px 5px -5px;padding:3px;background:white;border:solid 1px #ccc;}
? ? ? ?红色代码部分是为IE 6准备的, 不然...
? ? ? ?Clagnut阴影:
? ? ? ?Richard Rutter提供了一个类似的阴影方法, 他用的是相对定位来偏移图像.
? ? ? ?CSS代码如下:
.image_shadow{float:left;line-height:0;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow img{position:relative;left:-5px;top:-5px;padding:3px;background:white;border:solid 1px #ccc;}
? ? ? ?上面的阴影都有点生硬(hard), 我们可以通过建立一个额外的div标签, 再运用一个带透明度的png蒙板来遮盖阴影图片的边缘.
具有Alpha的阴影蒙板图片 shadow_mask.png
HTML代码如下:
?
<div class="image_shadow">
<div>
<img src="../images/origin_image.jpg" alt="" />
</div>
</div>
? ? ? ?CSS代码如下:
.image_shadow{float:left;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow div{float:left;padding:0 5px 5px 0;background:url(../images/shadow_mask.png) no-repeat left top;}
.image_shadow div img{padding:3px; background:white; border:solid 1px #ccc;}
? ? ? ?效果如下:
蒙板效果的阴影, 更加自然
无蒙板的阴影, 边缘有点生硬
? ? ? ?对于IE 6以下不支持png-24的透明效果, 我们要用到filter 和 hacks了
* html .images_shadow div{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/shadow_mask.png' ,sizingMethod='crop');}
? ? ? ?另还有类似CSS Sprites的方法创建阴影, 同样可以做到自然. 但是额外标签过多, 不推荐.
? ? ? ?看完以上关于CSS如何实现阴影效果的内容后,你是否对CSS实现阴影效果有了了解呢?如果你还想了解更多的相关资讯就请关注我们爱站技术频道吧。
原文链接:https://js.aizhan.com/web_authoring/css/5628.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:FireFox文本自动换行
下一篇:CSS中如何实现网页隔行换色
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash