盒子里面放了img标签，盒子浮动后，盒子的背景图片（就是阴影图片）会应用图片的宽高。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /* 核心技术就是float:left ,clear:right,

        盒子脱离文挡流后，背景图片会应用盒子的高度*/

        .shadow{

            border: 1px solid red;

            background: url('img/shadow.gif') no-repeat bottom right;

            /* margin: 5px; */

            float: left;

            clear: right;

        }

        .shadow img{

            display: block;

            width: 300px;

            height: 300px;

            /* 向左上角偏移5px */

            /* margin: -5px 5px 5px -5px; */

            /* 或者使用相对定位 */

            position: relative;

            top: -5px;

            left: -5px;

            /* border: 1px solid red;

            padding: 4px; */

        }

    </style>

</head>

<body>

    <div class="shadow">

        <img src="img/dunstan.jpg">

    </div>

</body>

</html>

为了显示效果明显，我给背景图案加了边框，只要图片大小不超过背景图片都能实现阴影边框，演示地址：http://down.yesyes.wang/book/04/shadow.html

css2.1实现图片添加阴影效果的更多相关文章

  1. css3实现小米商城鼠标移动图片上浮阴影效果

    今天在编程爱好者编码库看见一个好玩的程序,代码如下. <!DOCTYPE html> <html> <head>     <meta charset=&quo ...

  2. 使用CSS为图片添加边框的几种方法

    css的应用十分广泛,即便用在图片的效果中也是方法多样,本文下面就介绍五种为图片添加特殊效果边框的CSS写法阴影效果 通过使用带有一些padding之的背景图来添加阴影效果. HTML <img ...

  3. [Xcode 实际操作]二、视图与手势-(6)给图像视图添加阴影效果

    目录:[Swift]Xcode实际操作 本文将演示给图像视图添加阴影效果 import UIKit class ViewController: UIViewController { override ...

  4. 使用CSS为图片添加更多趣味的5种方法

    使用Photoshop为每个图片添加某种样式虽然可行,但会是相当乏味且困难的长久工作.下面要介绍的CSS技巧将帮助你从痛苦中解脱出来! 阴影效果 通过使用带有一些padding之的背景图来添加阴影效果 ...

  5. HTML中图片添加

    图片添加后保存的是添加路径 例: <div class="form-group"> <label class="col-sm-3 control-lab ...

  6. ios图片添加文字或者水印

    在项目中,我们会对图片做一些处理,但是我们要记住,一般在客户端做图片处理的数量不宜太多,因为受设备性能的限制,如果批量的处理图片,将会带来交互体验性上的一些问题.首先让我们来看看在图片上添加文字的方法 ...

  7. iOS给图片添加滤镜&使用openGLES动态渲染图片

    给图片增加滤镜有这两种方式: CoreImage / openGLES 下面先说明如何使用CoreImage给图片添加滤镜, 主要为以下步骤: #1.导入CIImage格式的原始图片 #2.创建CIF ...

  8. 为图片添加九宫格信息-UI界面编辑器(SkinStudio)教程

    1.1.   为图片添加九宫格信息 在UI编辑器中添加一张图片 使用Photoshop打开这张图片 放大这张图片,使用切片工具,选取LeftTop(左上角固定不变的位置) 双击切片,找到尺寸信息 将尺 ...

  9. php 图片添加文字水印 以及 图片合成(微信快码传播)

    1.图片添加文字水印: $bigImgPath = 'backgroud.png'; $img = imagecreatefromstring(file_get_contents($bigImgPat ...

随机推荐

  1. [python]什么是生成器

    看理论硬是看的抓狂,然后去百度贴吧看到了一句话,什么叫python生成器,简直秒懂

  2. github在windows下的安装和基本使用

    1.在win下安装github时花费的时间是非常长的,有时还会出现因各种原因安装不成功.离线包本地安装方便的解决了此问题.点击http://pan.baidu.com/s/1boGrNLP可下载,解压 ...

  3. OSS.Social微信项目标准库介绍

    经过本周的努力,昨晚终于完成OSS.Social微信项目的标准库支持,当前项目你已经可以同时在.net framework和.net core 中进行调用,调用方法也发生了部分变化,这里我简单分享下, ...

  4. js获取浮动(float)元素的style.left值为空的解决办法

    解决办法: 1.使用行内样式设置元素的top和left值; 2.or直接获取元素的offsetLeft得到相关数值,还不需要parseInt 问题原因: 如果父div的position定义为relat ...

  5. cloudbase-init 自动扩盘的副作用 - 每天5分钟玩转 OpenStack（154）

    这是 OpenStack 实施经验分享系列的第 4 篇. cloudbase-init 的一项功能是自动扩展 windows 的 C 盘.比如 windows 镜像是 20G,在部署 instance ...

  6. java为移动端写接口

    java作为一门后端语言,其厉害之处在于web,大家比较熟知的各种网络应用,java都能做,那么在这个移动优先的时代,如何继续发挥java的强大呢.通常是让java作为一个app的服务端,为app客户 ...

  7. 不启动VS2013，直接打开帮助文档的方法

    在使用VS2013做开发的时候,当我们需要查询一个知识点时,直接按"F1"键就可以打开配套的帮助文档.如果在没有打开VS2013的情况想查看它的帮助文档,我们应该怎么办呢?我们能否 ...

  8. Ajax跨域实现淘宝/百度搜索下拉提示效果

    最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:

  9. Linux 下文件操作 shell

    删除目录下的所有文件ls *.log | xargs rm -f当前目录所有文件大小的总和ll | awk '{sum += $5}; END {print sum/1048576}'将命令推送到后台 ...

  10. 用Javascript大批量收集网站数据

    最近为了写论文,要大批量收集慕课网的相关用户数据(因为用户个人主页是公开的),故而写了一个插件进行收集.需要在慕课网控制台输入.最后收集了3000多份数据. /* 收集项 收集标准 用户编号 慕课网用 ...