备用素材：

1.png

　　  　　

shadow.png

　　　　　　

第一种方式： 利用负边距实现

最终效果图：

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>利用背景实现阴影</title>

</head>

<body>

    <div class="image_warpper">

            <img src="1.jpg" width:200px; height:200px;/>

    </div>

</body>

</html>
        .image_warpper{

            float:left;

            background:url("shadow.png") no-repeat  bottom right;

        }

        .image_warpper img{

            background:#fff;

            padding:4px;

            margin: -4px 4px 4px -4px;

            vertical-align: bottom;

            border:1px solid #eee;

        }

第二种方式，不是用负的外边距，而是使用position:relative属性

　　

        .image_warpper{

            float:left;

            background:url("shadow.png") no-repeat  bottom right;

        }

        .image_warpper img{

            background:#fff;

            padding:4px;

            position:relative;

            vertical-align: bottom;

            border:1px solid #ccc;

            top:-4px;

            left:-4px;

        }

　　效果如下：　　

第三种方式： CSS3  -   Box-shadow

　　　顺带回顾下其语法：

　　　　　　

　　

        .image_warpper{

            float:left;

            background:url("shadow.png") no-repeat  bottom right;

        }

        .image_warpper img{

            background-color:#fff;

            padding:4px;

            vertical-align: bottom;

            border:1px solid #ccc;

            box-shadow: 4px 4px #ccc;

　　　　　　　　

        }

目前支持该属性现代浏览器：  IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

CSS投影实现方式的更多相关文章

  1. CSS 的定位方式和含义

    CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...

  2. CSS的引入方式

    再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...

  3. 编写css代码的方式

            css(层叠样式表) 在一个网页中主要负责了页面的数据样式.       编写css代码的方式:       第一种: 在style标签中编写css代码. 只能用于本页面中,复用性不强 ...

  4. CSS引入的方式有哪些? link和@import的区别是?转载

    CSS引入的方式有哪些? link和@import的区别是? HTML 中引入 CSS 的方式 有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS ...

  5. css的存在方式和选择器

    css的存在方式 元素内联 页面嵌入 外部引入 元素内联 直接在html的标签中定义样式,类似于: <div style="属性1;属性2;属性3"><div&g ...

  6. css常见布局方式

    CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...

  7. 学习总结：CSS(一)定义方式、选择器、选择器权重

    一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;&q ...

  8. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  9. CSS 五种方式实现 Footer 置底

    CSS 五种方式实现 Footer 置底   页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推 ...

随机推荐

  1. C++小技巧之四舍五入与保留小数

    四舍五入:保留整数 int a = b+0.5; 保留一位小数  int a=(b+0.05)*10; double c=a/10; 保留二位小数  int a=(b+0.005)*100; doub ...

  2. QT 5.1.1 for Android 开发环境搭建与配置【Windows 7】

    前言:本人操作系统为Windows7 64位,用的是32位的安装包,32位系统没有验证. 一.首先下载以下安装包,如果提供的链接失效请自行下载: (1) Android SDK (Windows 32 ...

  3. C++ Const成员函数

    一些成员函数改变对象,一些成员函数不改变对象. 例如:  int Point::GetY() { return yVal; }  这个函数被调用时,不改变Point对象,而下面的函数改变Point对象 ...

  4. Debian、Ubuntu常用命令大全

    注:本人是用的Debian,个别命令可能有问题. 原文:http://www.jb51.net/os/Ubuntu/56362.html 一.文件/文件夹管理 ls 列出当前目录文件(不包括隐含文件) ...

  5. FlowPlayer 参数说明

    <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> & ...

  6. javascript中的事件问题

    事件的类型: (1)鼠标事件:   click用户点击鼠标时发生,当用户的焦点在按钮上,并按了回车键,同样会触发这个事件 dbclick 用户双击鼠标左键时发生    mouseover 鼠标移出某个 ...

  7. 利用Cocoapods、SVN 创建私有库实现方案（yoowei）

    由于项目年后要进行组件化,考虑到如果公司内部实现一些私有的组件,不对外公开,而又想在不同项目中使用,该怎么办呢? 使用Cocoapods制作私有库就完美的解决了这个问题.下图就是使用私有库带给我们的好 ...

  8. 一些我后写出来的awk脚本

    mail.awk function mailByShell(receiver, sender, subject, content, __ARGVEND__, xhead, xfrom, xmime, ...

  9. python word操作深入

    python 把word转html:上传页面<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  10. 我所理解的设计模式（C++实现）——策略模式（Strategy Pattern）

    概述: 每个人都要“交个人所得税”,但是“在美国交个人所得税”和“在中国交个人所得税”就有不同的算税方法. 而策略模式就是对算法进行包装,是把使用算法的责任和算法本身分割开来,委派给不同的对象管理.策 ...