图片或边框的阴影效果在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代码 */ 图片URL" alt="图片描述"> ``` 接下来,我们将编写CSS代码来实现这个效果。我们可以通过使用`:hover`伪类来指定鼠标悬停时应用的样式。在这个例子中,...
学习和理解这个源码,开发者不仅可以掌握图片阴影效果的实现,还能了解到自定义View的开发流程,这对提升Android UI设计能力非常有帮助。同时,这种自定义组件也可以作为工具库,方便未来项目中快速应用阴影效果。 ...
在C#编程中,我们可以利用GDI+(Graphics Device Interface Plus)库来实现图像处理,包括为图片添加阴影效果。GDI+是.NET Framework的一部分,提供了丰富的图形绘制功能,包括绘图、填充、变换、文本渲染等。在这个...
本教程将深入探讨如何在Android中实现图片阴影效果和影子效果,主要基于Android源码进行讲解。 首先,我们要理解Android中阴影效果的基本概念。在Android中,阴影通常是由`Paint`对象的`setShadowLayer()`方法生成...
【CSS3在线实现图片阴影效果.zip】这个压缩包文件包含了一种使用CSS3技术来创建图片阴影效果的方法。CSS3是CSS(层叠样式表)的最新版本,它引入了许多新特性和功能,使得网页设计更为丰富和动态。在这个项目中,...
本文将深入探讨如何使用CSS3在线实现图片阴影效果,以及它对设计师工作流程的影响。 首先,CSS3的阴影效果主要包括`box-shadow`和`text-shadow`两个属性。`box-shadow`用于为元素添加盒阴影,而`text-shadow`则是为...
在本教程中,我们将深入探讨如何为图片添加阴影效果,以及相关编程代码的应用。 首先,阴影效果通常通过在原始图像下方创建一个颜色较淡、透明度较高的副本,并将其稍微偏移来实现。这个副本就是阴影部分,通过调整...
纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移...
综上所述,Android Studio提供了多种方式来实现图片的倒影和阴影效果。开发者可以根据目标设备的API级别和具体需求选择合适的方法。实践中不断尝试和调试,将有助于你创造出更加精致和引人入胜的Android应用界面。
本项目“图片阴影缩放功能带动画效果”旨在模仿百度动物园的交互设计,并在此基础上添加了一些独特的功能,如鼠标悬浮时的图片缩放以及图片的动态阴影效果。 首先,我们来详细探讨图片阴影这一概念。阴影效果在UI...
这个压缩包“Android 图片阴影效果和影子效果源码.zip”包含了实现这一功能的相关源码,主要涉及的技术点是Android的Canvas和绘图API。 首先,Android的Canvas类是Android图形系统的核心部分,它允许开发者在Bitmap...
本篇文章将深入探讨如何利用Drawable和Canvas等技术在Android中实现图片阴影效果。 首先,我们来看Drawable。Drawable是Android图形库中的一个重要概念,它可以视为一个可绘制的对象,可以是图像、形状或颜色等。在...
本资源提供了实现图片阴影效果和影子效果的源码,帮助开发者深入理解相关技术并应用到自己的项目中。以下是对这些知识点的详细解释。 1. **阴影效果(Shadow Effect)** 在Android中,可以使用`Paint`类的`...
【图片滑过阴影效果】是一种在网页设计中常见的视觉效果,它通过CSS3技术实现,为用户在浏览图片时提供动态且引人入胜的体验。这种效果通常应用于图像画廊,当用户在图片之间滑动时,前一张图片会留下一个阴影,形成...
本资源“安卓Android源码——图片阴影效果和影子效果.zip”提供了一种实现这种视觉效果的方法,主要涉及的技术点包括Canvas、Shader、Paint以及View的自定义。 1. **Canvas**: 在Android中,Canvas是用于绘制2D图形...
"CSS3图片相册立体阴影效果"就是其中之一,它利用CSS3的新属性和技巧,使图片相册呈现出具有深度感的立体阴影,为用户提供更为生动和真实的浏览体验。 在CSS3中,我们可以通过以下关键知识点来实现这种立体阴影效果...
本资源"Android 图片阴影效果和影子效果源码.rar"提供了实现这些效果的源代码,对于开发者来说,这是一个宝贵的参考资料。接下来,我们将深入探讨Android中如何实现图片阴影和影子效果。 1. **阴影效果(Shadow ...