盒子里面放了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. 自己用到的相关Linux命令，谨以记录

    1.查看磁盘使用情况 df -h(方便看些) df -l(字节大小,不方便看) 2.查看根目录下文件/文件夹大小 du -sh /*(/*表示根目录下所有文件) 3.查看文件列表时显示文件大小 ll ...

  2. ACM入门:第s名的小红

    前几天的大一新生赛自己也跟着做了做,顺便测测后台数据有没有bug,这是一道排序题,题目如下: Problem Description 小红总是排第二,有点不服气,现在她想知道一个序列中第二小的数字是多 ...

  3. windows下部署免费ssl证书(letsencrypt)

    随着网络的发展,网络安全也越来越重要,对于网站来说,从Http升级到https也是我们要做的首要事情.要实现https,首先我们需要申请一张SSL证书,这篇文章我主要介绍下边这几个方面: 1. SSL ...

  4. css中书写小三角

    我们在开发过程中,有很多的方向标签不是图片,而是用css方法书写上去的. 首先我们要了解原理,border的边框的脚步是45度角. 向左方向: width:0px: height:0px: borde ...

  5. 我的JS 中级学习篇

    在codefordream上进入中级学习后,感觉立马从js的基础学习往前跳了好远,上面的东西好像都是第一次看到一样．这时候才发现,说来也曾接触过js,但是这时候才发现对js的认识就停在知道两点:js中 ...

  6. flume-sink报错 java.lang.IllegalStateException: close() called when transaction is OPEN - you must either commit or rollback first

    1. 确认代码无误(根据情况修改,表示若获得不了数据不会自动commit或者rollback): Event event = channel.take(); if (event == null) { ...

  7. SaberRD之瞬态分析

    瞬态分析(Transient Analysis)也叫做暂态分析,一般用于分析含有储能器件的电路在换路后发生的过渡状态,比如分析RLC电路在接通.断开.改接以及参数发生改变和电源突变时,电路的电压电流从 ...

  8. hibernate中save（）、update（）、saveOrUpdate（）的区别

    save()方法很显然是执行保存操作的,如果是对一个新的刚new出来的对象进行保存,自然要使用这个方法了,数据库中没有这个对象. update()如果是对一个已经存在的托管对象进行更新那么肯定是要使用 ...

  9. angular2入门，就这一篇就够了

    背景与概念: AngularJS2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行. AngularJS2 是 Angular 1.x 的升级版本,性能上得到显著的 ...

  10. 如何用好消息推送为app拉新、留存、促活

    作为移动端APP产品运营最重要的运营手段,JPush消息推送被越来越多的APP厂商所重视,在信息泛滥的移动互联网时代,手机APP应用安装得越来越多,小小的手机屏幕每天收到的消息推送也越来越多,站在用户 ...