<title>无标题文档</title>

<style type="text/css">

   /*方法一：使用一个GIF文件的方法*/

   .gifshadow

   {

    padding:4px 10px 10px 4px;

    border:0;

    border-top:#eee 1px solid;

    border-left:#eee 1px solid;

    background-image: url(shadow.gif);/*换成你的图片*/

    background-repeat: no-repeat;

    background-position: right bottom;

   }

   /*方法二：使用滤镜*/

   .cssshadow

   {

    -moz-box-shadow: 3px 3px 4px #000;

    -webkit-box-shadow: 3px 3px 4px #000;

    box-shadow: 3px 3px 4px #000;

    /* For IE 8 */

    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

    /* For IE 5.5 - 7 */

    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

   }

   /*方法三：使用2个PNG图片，滑动门技术，可实现柔边阴影*/

   .pngshadow{

            float:right;

    background:url(right_buttom.png) no-repeat bottom right;

    padding:0 10px 10px 0;

        }

        .pngshadow div{

    background:url(left_top.png) no-repeat ;

        }

        .pngshadow img {

            border:1px solid #FFFFFF;

            padding:4px;

        }

</style>

</head>

<body >

效果1:

<img class="gifshadow" src="1.jpg"/>

效果2:

<img class="cssshadow" src="1.jpg" />

效果3:

<div class="pngshadow">

<div><img src="1.jpg" /></div>

</div>

</body>

</html>

CSS实现图片阴影效果的更多相关文章

  1. css 横向渐变 图片阴影效果 字体模糊效果

    (必须加在Table的TD里,如果TD有背景就会遮盖阴影,可以把背景放到外套的表格里去) 背景颜色渐变 横向渐变 style="filter:progid:DXImageTransform. ...

  2. 学习笔记 第六章 使用CSS美化图片

    第六章  使用CSS美化图片 6.1  在网页中插入图片 GIF图像 跨平台能力,无兼容性问题: 具有减少颜色显示数目而极度压缩文件的能力,不会降低图像的品质(无损压缩): 支持背景透明功能,便于图像 ...

  3. Django调用JS、CSS、图片等静态文件

    zz 在下面的例子中,我们将media作为静态(CSS\JS\图片文件)文件的目录 方法一. 1.首先在settings.py文件中自定义参数 STATIC_PATH=’./media’ .(意为当前 ...

  4. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  5. 使用CSS将图片转换成黑白(灰色、置灰)z转

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...

  6. Spring MVC程序中得到静态资源文件css,js,图片

    转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题, ...

  7. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  8. 网站性能优化之CSS无图片技术：三角形

    1.使用CSS无图片技术,可以总结得到以下三个优点: 减少请求资源的大小: 减少http的请求个数: 提高可维护性. 一.CSS无图片技术,微博中有哪些实际应用呢? 通过上面的展示,我们可以看到,无图 ...

  9. mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效

    引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" ...

随机推荐

  1. oracle之 数据泵dump文件存放nfs报ORA-27054

    问题描述:源端 10.2.0.4  目标端:11.2.0.4   在目标端划分1T存储与源端做一个NFS 错误:指定dump导出为本地文件系统,正常.   指定dump导出为nfs文件系统,报错. 报 ...

  2. 渐进式 jpg 和 交错式 gif png 提高图片站体验

    渐进式 jpg 和 交错式 gif png 提高图片站体验= 渐进式的JPG比原始JPG还要小!! 让图片性感的露给你看~google picasa 和 smashing magazine 都有用到搞 ...

  3. ffmpeg采集帧出错不退出的补丁

    在ffmpeg2.81.11和ffmpeg3.0.7上试验.ffmpeg没有FFERROR_REDO常量定义,但ffmpeg3.0.7上有. diff --git a/libavdevice/v4l2 ...

  4. ANSI和UNICODE编程的注意事项

    建立UNICODE编码工程 在VC60下,默认方式下建立的是ANSI编码的工程(注:编译的exe内部,其资源字符是以UNICODE保存),建立UNICODE编码工程的方法: 1.为工程添加UNICOD ...

  5. FatJar—Java Application制作jar包

    Fat Jar功能非常强大,先下载吧. 下载地址:sourceforge.net/projects/fjep/files/ http://files.cnblogs.com/files/nidongd ...

  6. Java-Runoob-高级教程-实例-字符串：05. Java 实例 - 字符串反转

    ylbtech-Java-Runoob-高级教程-实例-字符串:05. Java 实例 - 字符串反转 1.返回顶部 1. Java 实例 - 字符串反转  Java 实例 以下实例演示了如何使用 J ...

  7. 学习笔记之C# 教程 | 菜鸟教程

    C# 教程 | 菜鸟教程 http://www.runoob.com/csharp/csharp-tutorial.html 菜鸟教程在线编辑器 http://www.runoob.com/try/r ...

  8. display:table; 也可以实现 div 始终和内包的图片大小相同

    display:table; 也可以实现 div 始终和内包的图片大小相同

  9. solr统计只返回10或者100个数据的解决办法

    因为我所在的公司为政府做的项目[风险管理系统],其中涉及大量的统计展示,多数以整个市的区划,行业部门等方式返回,在昨天,我发现听过填报单位的方式返回时,始终只有100个数据.通过对比发现,在前辈的代码 ...

  10. oracle完全删除表空间

    步骤一: 删除user drop user ×× cascade 说明: 删除了user,只是删除了该user下的schema objects,是不会删除相应的tablespace的. 步骤二: 删除 ...