图片或边框的阴影效果在web app中经常会意见,以下是归纳的几种简单的实现方法
实现一:
<style type="text/css">
<!--
/* easy drop shadow
================================== */
.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
float:left;
line-height:0;
}
.img-wrapper img {
background:#fff;
padding:4px;
border:1px solid #a9a9a9;
position:relative;
left:-5px;
top:-5px;
}
-->
</style>
<div class="img-wrapper">
<img src="images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" />
</div>
实现二:
<style type="text/css">
<!--
/* easy drop shadow
================================== */
.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
position: relative;
margin: 10px 0 0 10px;
}
.img-wrapper img {
/*background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;*/
display: block;
margin: -5px 5px 5px -5px;
position: relative;
}
-->
</style>
<div class="img-wrapper">
<img src="images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" />
</div>
实现三:
<style type="text/css">
<!--
/* easy drop shadow */
.img-wrapper {
background: url(images/shadow.gif) no-repeat right bottom;
float: left;
/*margin: 10px 0 0 10px;*/
}
.img-wrapper div {
background: url(images/mask.png) no-repeat left top !important;
background: url(images/mask.gif) no-repeat left top;
padding: 0 5px 5px 0;
float: left; /* :KLUDGE: Fixes bug in IE/Mac */
}
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
}
-->
</style>
<div class="img-wrapper">
<div>
<img src="images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" />
</div>
</div>
实现四:
<style type="text/css">
<!--
/* easy drop shadow
================================== */
.img-wrapper {
background:url(images/shadow.gif) no-repeat right bottom;
float: left;
}
.img-outer {
background:url(images/bottom-left2.gif) no-repeat left bottom;
float: left; /* :KLUDGE: Fixes problem in IE5.2/Mac */
}
.img-inner {
background:url(images/top-right2.gif) no-repeat top right;
padding: 0 5px 5px 0;
float: left; /* :KLUDGE: Fixes problem in IE5.2/Mac */
}
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
display: block;
}
-->
</style>
<div class="img-wrapper">
<div class="img-outer">
<div class="img-inner">
<img src="images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" />
</div>
</div>
</div>
分享到:
相关推荐
纯CSS3实现的各种阴影效果,无需图片和js代码即可实现图片、按钮等元素的阴影效果,完全通过样式控制阴影大小、方向和深度,经测试效果相当不错非常酷。
CSS实现当鼠标滑过图片出现阴影效果, 效果蛮不错的.
纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移...
可以给图片绘制一个阴影的类,已经通过控制台调用测试,可以添加多种阴影
Android Studio 中实现图片倒影、阴影效果
纯CSS实现鼠标移上图片添加阴影效果! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
CSS3实现的图片列表,当鼠标悬停在图片上的时候,图片立体显示,且带有一定阴影效果,点击图片则会弹出提示对话框。 建议开发童鞋使用跨平台开发工具——统一开发环境UDE来进行查看、调试、开发哦~~它是一款HTML5跨...
Android 图片阴影效果和影子效果源码
利用Drawable,canvas的等,实现的图片阴影效果
直接在线生成图片背景边框效果,效果很不错,方便了设计师,无需在PS中一点一点的画出来了 请在支持CSS3浏览器下观看
css+div实现图片内阴影效果源码免费下载
自己写的阴影效果,里面用了Shader,具体的话是运用了深度碰撞测试和投影机技术,目前最常用的阴影技术,简单易懂~
另类方法实现VB窗口阴影效果,本例中主要是使用GDI42加载Png(调用DLL内部函数,这样方便了许多~),至于所谓阴影...唉,其实是png 图片,然后两个窗体重叠加载,不过看起来也蛮不错的~ 大概这种方法新手也可以上手...
这是一个纯粹的CSS3效果,模拟实现Pseudo-Classes模拟卡片翘边阴影效果、方框边框阴影效果,IE8及以下浏览器对CSS3不感冒,童鞋们就不要试了,但完美支持ie9、chrome、safari、firefox、opera、360等浏览器。...
本文实例介绍了Android实现图片阴影效果,设置画布颜色,图像倾斜效果,图片阴影效果的方法,采用canvas.save(Canvas.MATRIX_SAVE_FLAG);来实现。由于图片的实际尺寸比显示出来的图像要大一些,因此需要适当更改下...
给图片添加阴影效果,这是很常见的需求。第一种方法是自定义drawable,使用layer-list定义两个图片,代码如下: show_view.xml: <?xml version=1.0 encoding=utf-8?> <layer-list xmlns:android=...
之前我们分享过一些HTML5图片3D效果,这篇文章分享10款效果惊艳的HTML5图片特效中...今天我们再来分享一款利用纯CSS3实现的3D图片翻转展示特效,点击图片或者下方的翻页按钮即可选中相应的图片,并实现翻转展示效果。
给大家分享了如何利用iOS实现图片六边形阴影的效果,文中给出实现的示例代码,对大家的理解和学习很有帮助,有需要的可以参考借鉴,下面来一起看看吧。