给图片加阴影效果的CSS

.pic {
position:relative;
background:#CCC;
margin:10px;
}
.pic span {
display:block;
border:1px solid #333;
background:#FFF;
position:relative;
padding: 3px;
}
.right {/*阴影在右边时*/
top:-4px;
left:-4px;
}
.left {/*阴影在左边时*/
top:-4px;
right:-4px;
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 给图片加阴影效果的CSS

    给图片加阴影效果的CSS

    .pic { position:relative; background:#CCC; margin:10px; } .pic span { display:block; border:1px solid #333; background:#FFF; position:relative; padding: 3px; } .right {/*阴影在右边时*/ top:-4px; left:-4px; } .left {/*阴影在左边时*/ top:-4px; right:-4px; } [Ctrl+

  • webpack css加载和图片加载的方法示例

    webpack css加载和图片加载的方法示例

    css加载器 在webpack中,所有的资源(js文件.css文件.模板文件,图片文件等等)都被看成是一个模块,因此多有的资源都是可以被加载的. 加载这些资源我们要在module属性定义这些加载配置(指定加载器). 在module属性中,通过定义loaders定义加载器,其属性值是一个数组,每一个成员代表一个配置. 通过test定义匹配的规则(正则表达式) 通过loader定义加载器,可以通过!级联多个加载器 加载css是要两个加载器,一个是style-loader,一个是css-loader样

  • js图片加载效果实例代码（延迟加载+瀑布流加载）

    主要做了两种图片加载的效果 一种是遇到页面图片比较多的时候,带读条效果的加载提示(为了验证正确加载,设置了1秒钟的加载间隔时间) 另外一种是根据滑块的位置进行图片的预加载,在用户不察觉的情况下,实现瀑布流的加载效果 一 延迟加载 主要思路: HTML的img标签中,将正确的地址存在data-src属性中,给所有图片设置一个转圈圈的loading图片作为background js中,依次读取每一个img,将data-src中的地址替换到src中,去掉background 每成功加载一张图片,进度条

  • js实现鼠标悬浮给图片加边框的方法

    本文实例讲述了js实现鼠标悬浮给图片加边框的方法.分享给大家供大家参考.具体实现方法如下: html代码: <div class="T-s-l fl"> <a href="" class="a1"> <img src="images/11.jpg" width="234" height="368" /> </a><a href=&qu

  • js实现图片加载淡入淡出效果

    本文实例为大家分享了js图片加载淡入淡出效果展示的具体代码,供大家参考,具体内容如下 HTML代码 首先是图片标记的写法: <img data-src="/path/to/image.jpg" alt=""> 需要将图片的地址放到 data-src 属性里,而src值填写默认的一张图片. CSS代码 所有具有data-src属性的图片,我们将其初始显示状态为不可见,通过透明度来调节: img { opacity: 1; transition: opaci

  • php 图片加水印与上传图片加水印php类

    一个正规的网站,在需要上传图片时,往往都会需要在图片上增加自己网站的LOGO水印.那么如何实现这一步骤呢?首先让我们来了解PHP图片加水印的原理. 通过判断文件类型建立图形,然后把其复制到原建立的图形上,填充并建立rectangle,以备写入imagestring()或是在原已经定好的图像程序当中判断水印类型:一是字符串,另是增加一个图形对象在上面.以下是PHP图片加水印的转载! 参数说明: $max_file_size : 上传文件大小限制, 单位BYTE $destination_folde

  • JavaScript 计算图片加载数量的代码

    通过JavaScript 来计算当前图片加载的张数. 原理: 先定义一个图片的数组,然后通过image的onload事件来计算,注意,onload在ie和火狐有所不同. 最后需要一个进度条与之结合即可. 这个脚本在做游戏的地方用得比较多. 演示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

  • jQuery实现图片加载完成后改变图片大小的方法

    本文实例讲述了jQuery实现图片加载完成后改变图片大小的方法.分享给大家供大家参考,具体如下: 要改变图片的大小并不难,可以用jQuery操作css改变.但是前提是要判断图片是否加载完成.主要是通过jQuery的load事件和onreadystatechange来判断其状态. 对于IE6,用onreadystatechange可以直接处理,在IE7中,则需要用定时器来判断图片的readystate状态.而对于FF和Chrome刚可以直接用load事件来判断. 以下是在实例中使用的完整代码: <

  • 兼容ie、firefox的图片自动缩放的css跟js代码分享

    需求:图片width<=330px,height<=150. 1.利用max-width,max-height使图片等比例自动缩放,代码: 复制代码 代码如下: img{max-width: 330px;max-height: 150px;} 由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小. 2.用javascript脚本来兼容ie6,代码如: 复制代码 代码如下: var img_width = img.Offset

  • Android实现图片添加阴影效果的2种方法

    Android实现图片添加阴影效果的2种方法

    给图片添加阴影效果,这是很常见的需求.第一种方法是自定义drawable,使用layer-list定义两个图片,代码如下: show_view.xml: <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 阴影图片,android:left

随机推荐