盒子里面放了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. Google Guice学习

    学习动力:公司项目使用 官方文档:https://github.com/google/guice/wiki/Motivation 学习阶段:入门 主要部份: 简介 Bindings方式 Scopes设 ...

  2. C# XmlSerializer将对象序列化以及反序列化（Sqlite数据库）

    获取不同数据库表信息将筛选出来的信息序列化以及反序列化 相应类结构: Class Tables: [Serializable] [XmlRoot("Table")] public ...

  3. 《javascript个人理解，个人整理。》

    万事开头难. 本人做前端工程师,已几年,没有特别大的,已文字方式去做总结. 前段时间,早已经想好,但是迟迟没有去下笔!好在现在陆陆续续的写下去. 我知道这是一个很大的工程,但是我还是想做下去,不为别的 ...

  4. 基于ES6模块标准通过webpack打包HTM5项目

    本篇主要演示通过webpack打包phaser项目,webpack安装方法在此处就不一一赘述了 经常用phaser来写html5游戏的朋友可能会发现,当游戏场景比较多时,如果都写在一个js文件中那么将 ...

  5. libviso中的姿态解算【转载】

    这篇关于libviso的文章,本人已投稿在泡泡机器人微信公众号中,放到这里,作学习笔记用. libviso一直以来被称为在视觉里程计(VO)中的老牌开源算法.它通过corner,chessboard两 ...

  6. Android 反射-换一种方式编程

    Android 反射-换一种方式编程 转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/59109933 本文出自[赵彦军的博客] 上一 ...

  7. javascript组成概述认识

    这里的JavaScript组成概述是说的在浏览器端渲染的JavaScript而不是nodejs js组成概述 js的完整实现是由ECMAscript.DOM.BOM三个部分组成的: -ECMAscri ...

  8. 解决clipboard手机端无法复制的一种思路

    最近,做了一个切图的小项目 主要内容是微信号的推广页面,上面会有精美的图片和微信号:) 点击按钮,会复制到粘贴板上,自己去微信里面粘贴搜索:),懒人会进行一系列复杂操作么,不看好 首先,百度了一下,看 ...

  9. linux 之 tcpdump

    tcpdump详细命令 -i 参数指定监听网口 -c 参数指定监听的数据包数量 -s 参数指定监听数据包大小 -w 参数指定监听数据包写入文件 如果要监听某几台主机数据包 例如10.10.10.10. ...

  10. homebrew常用命令

    安装 ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/Go/install)" 搜索 brew sea ...