`

图片阴影效果实现

阅读更多

图片或边框的阴影效果在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>
 
分享到:
评论

相关推荐

    23种css3图片阴影效果

    纯CSS3实现的各种阴影效果,无需图片和js代码即可实现图片、按钮等元素的阴影效果,完全通过样式控制阴影大小、方向和深度,经测试效果相当不错非常酷。

    CSS实现当鼠标滑过图片出现阴影效果

    鼠标滑过图片阴影效果 /* 在这里插入CSS代码 */ 图片URL" alt="图片描述"&gt; ``` 接下来,我们将编写CSS代码来实现这个效果。我们可以通过使用`:hover`伪类来指定鼠标悬停时应用的样式。在这个例子中,...

    图片添加阴影效果

    学习和理解这个源码,开发者不仅可以掌握图片阴影效果的实现,还能了解到自定义View的开发流程,这对提升Android UI设计能力非常有帮助。同时,这种自定义组件也可以作为工具库,方便未来项目中快速应用阴影效果。 ...

    c# 绘制图片阴影 可以给图片绘制阴影

    在C#编程中,我们可以利用GDI+(Graphics Device Interface Plus)库来实现图像处理,包括为图片添加阴影效果。GDI+是.NET Framework的一部分,提供了丰富的图形绘制功能,包括绘图、填充、变换、文本渲染等。在这个...

    Android图片阴影效果和影子效果_安卓源码.zip

    本教程将深入探讨如何在Android中实现图片阴影效果和影子效果,主要基于Android源码进行讲解。 首先,我们要理解Android中阴影效果的基本概念。在Android中,阴影通常是由`Paint`对象的`setShadowLayer()`方法生成...

    CSS3在线实现图片阴影效果.zip

    【CSS3在线实现图片阴影效果.zip】这个压缩包文件包含了一种使用CSS3技术来创建图片阴影效果的方法。CSS3是CSS(层叠样式表)的最新版本,它引入了许多新特性和功能,使得网页设计更为丰富和动态。在这个项目中,...

    CSS3在线实现图片阴影效果

    本文将深入探讨如何使用CSS3在线实现图片阴影效果,以及它对设计师工作流程的影响。 首先,CSS3的阴影效果主要包括`box-shadow`和`text-shadow`两个属性。`box-shadow`用于为元素添加盒阴影,而`text-shadow`则是为...

    给图片添加阴影效果

    在本教程中,我们将深入探讨如何为图片添加阴影效果,以及相关编程代码的应用。 首先,阴影效果通常通过在原始图像下方创建一个颜色较淡、透明度较高的副本,并将其稍微偏移来实现。这个副本就是阴影部分,通过调整...

    纯CSS实现鼠标移上图片添加阴影效果.rar

    纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移...

    图片倒影、阴影效果

    综上所述,Android Studio提供了多种方式来实现图片的倒影和阴影效果。开发者可以根据目标设备的API级别和具体需求选择合适的方法。实践中不断尝试和调试,将有助于你创造出更加精致和引人入胜的Android应用界面。

    图片阴影缩放功能带动画效果

    本项目“图片阴影缩放功能带动画效果”旨在模仿百度动物园的交互设计,并在此基础上添加了一些独特的功能,如鼠标悬浮时的图片缩放以及图片的动态阴影效果。 首先,我们来详细探讨图片阴影这一概念。阴影效果在UI...

    Android 图片阴影效果和影子效果源码.zip

    这个压缩包“Android 图片阴影效果和影子效果源码.zip”包含了实现这一功能的相关源码,主要涉及的技术点是Android的Canvas和绘图API。 首先,Android的Canvas类是Android图形系统的核心部分,它允许开发者在Bitmap...

    图片阴影效果

    本篇文章将深入探讨如何利用Drawable和Canvas等技术在Android中实现图片阴影效果。 首先,我们来看Drawable。Drawable是Android图形库中的一个重要概念,它可以视为一个可绘制的对象,可以是图像、形状或颜色等。在...

    安卓Android源码——图片阴影效果和影子效果源码.zip

    本资源提供了实现图片阴影效果和影子效果的源码,帮助开发者深入理解相关技术并应用到自己的项目中。以下是对这些知识点的详细解释。 1. **阴影效果(Shadow Effect)** 在Android中,可以使用`Paint`类的`...

    图片滑过阴影效果

    【图片滑过阴影效果】是一种在网页设计中常见的视觉效果,它通过CSS3技术实现,为用户在浏览图片时提供动态且引人入胜的体验。这种效果通常应用于图像画廊,当用户在图片之间滑动时,前一张图片会留下一个阴影,形成...

    安卓Android源码——图片阴影效果和影子效果.zip

    本资源“安卓Android源码——图片阴影效果和影子效果.zip”提供了一种实现这种视觉效果的方法,主要涉及的技术点包括Canvas、Shader、Paint以及View的自定义。 1. **Canvas**: 在Android中,Canvas是用于绘制2D图形...

    CSS3图片相册立体阴影效果

    "CSS3图片相册立体阴影效果"就是其中之一,它利用CSS3的新属性和技巧,使图片相册呈现出具有深度感的立体阴影,为用户提供更为生动和真实的浏览体验。 在CSS3中,我们可以通过以下关键知识点来实现这种立体阴影效果...

    Android 图片阴影效果和影子效果源码.rar

    本资源"Android 图片阴影效果和影子效果源码.rar"提供了实现这些效果的源代码,对于开发者来说,这是一个宝贵的参考资料。接下来,我们将深入探讨Android中如何实现图片阴影和影子效果。 1. **阴影效果(Shadow ...

Global site tag (gtag.js) - Google Analytics