盒子里面放了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. 一个基于POI的通用excel导入导出工具类的简单实现及使用方法

    前言: 最近PM来了一个需求,简单来说就是在录入数据时一条一条插入到系统显得非常麻烦,让我实现一个直接通过excel导入的方法一次性录入所有数据.网上关于excel导入导出的例子很多,但大多相互借鉴. ...

  2. python解释器的安装；python2与python3同时在环境变量中时的解决方案

    新文档 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,addres ...

  3. python抓取NBA现役球员基本信息数据

    链接:http://china.nba.com/playerindex/ 所需获取JSON数据页面链接:http://china.nba.com/static/data/league/playerli ...

  4. Java之路——名词解释(一)

    一.开篇 许多人在初接触Java的时候,都会被各种Java的英文缩写名词给弄得头晕脑胀.看一个技术,内容里又会有一堆其他的技术名词,看了半天不知所云.尝试去查一下这些名词的解释,除了非常学术性的解释之 ...

  5. windows下使用命令行给通过genymotion创建的虚拟机配制IP地址

    1.先用genymotion创建2个虚拟机,GoogleNexus7-1,GoogleNexus7-2. 2.在命令行执行 vBoxManage dhcpserver modify --ifname ...

  6. 从0移植uboot (二) _启动流程分析

    经过了上一篇的配置,我们已经执行make就可以编译出一个uboot.bin,但这还不够,首先,此时的uboot并不符合三星芯片对bootloader的格式要求,其次,此时的uboot.bin也没有结合 ...

  7. react搭配amazeui环境搭建

    1.安装node https://nodejs.org/en/download/ 查看node   npm版本 2.安装react 创建新的react单页面应用 npm install  -g cre ...

  8. Android Monkey压力测试介绍

    monkey:通过Monkey程序模拟用户触摸屏幕.滑动Trackball. 按键等操作来对设备上的程序进行压力测试,检测程序多久的时间会发生异常. Monkey的构架 Monkey的参数 Monke ...

  9. Linux 搭建Zookeeper集群

    1.使用root创建zookeeper用户:     useradd zookeeper:     passwd  zookeeper; 2.登录zookeeper用户,将下载的zookeeper-3 ...

  10. Hello,Kubernetes

    什么是Kubernetes Kubernetes(k8s)是一款开源的以容器为中心的,用于跨主机集群自动部署(automating deployment),控制容器扩展/收缩(scaling)和管理容 ...