盒子里面放了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. java Socket(TCP)编程小项目

    package 服务器端相关操作; import java.io.Serializable; /* * 创建存储需要传输信息的对象,方便客户端向服务器端传送数据 */ public class Cli ...

  2. 初学bootstrap ---栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CountDownLatch类的使用

    java.util.concurrent.CountDownLatch是一个并发构造,它允许多个线程等候特定的操作完成. CountDownLatch用一个数字初始化,通过调用countDown()方 ...

  4. JS作用域理解

    1.JS解析步骤: a.预解析 将变量声明提升: 将函数声明及函数内容提升,可以理解成原来位置的函数在解析代码时已经提到代码初始位置: 遇到重名,只留下一个: 如有重名变量和函数,留下函数: 如有两个 ...

  5. centos快速安装redis

    mkdir redis cd redis wget http://labfile.oss.aliyuncs.com/files0422/redis-2.8.9.tar.gz 解压 tar -xvfz ...

  6. Tomcat 实现热部署

      热部署概念   热部署是指在你对JSP或JAVA类进行了修改在不重启WEB服务器前提下能让修改生效,配置文件的修改除外     热部署好处   每次打增量包的时候就不用重新启动tomcat了   ...

  7. Spring+SpringMVC+MyBatis+easyUI整合基础篇（八）mysql中文查询bug修复

    写在前面的话 在测试搜索时出现的问题,mysql通过中文查询条件搜索不出数据,但是英文和数字可以搜索到记录,中文无返回记录.本文就是写一下发现问题的过程及解决方法.此bug在第一个项目中点这里还存在, ...

  8. 如何配置多台mysql 服务器？

    当我们数据量增大时,数据库需要进行扩张时,或者做高可用,那么我们就需要用到同时多台mysql服务器.通过配置:可以实现,一台主mysql,负责记录数据的变化,多台从mysql,查询结果.修改文件:/w ...

  9. 关于java泛型

    <T> 代表的是泛型 ,实例化的时候将传入真正的数据类型,比如: public interface BaseProvider<T>{ public T test(); } 实例 ...

  10. eclipse下配置安装ssm图文教程（web版）

    eclipse下配置安装ssm图文教程(web版) 一.安装所需jar包 1.1  mybatis安装包 可以进入GitHub的https://github.com/mybatis/mybatis-3 ...