备用素材：

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. oracle PL/SQL程序设计

    declare 说明部分    (变量说明,光标申明,例外说明 ] begin 语句序列   (DML语句]… exception 例外处理语句 End; /

  2. Centos下删除文件名乱码文件

    centos下通过rm命令来删除文件,但是如果要删除文件名乱码的文件,就不能直接使用rm命令了,因为压根就无法输出文件名来.不过借助find命令可以实现对其删除.在linux下对于每个文件都一个对应的 ...

  3. eclipse 新建servlet

    在mac下的eclipse新建servlet报错: 解决一: --------------------------------- 解决二: 在右键项目名称中,打开 Properties->jav ...

  4. mvc 生成输出url

    最近一直在学习mvc,其中对于 Url.Action生成的url感到很困惑.官方的解释的基于路由方案生成的url.问题是,怎样基于,怎样选择,没有过多的解释.网上找了很多资料,也看不懂,最后还是在pr ...

  5. Mysql权限控制 - 允许用户远程连接（转载）

    Mysql为了安全性,在默认情况下用户只允许在本地登录,可是在有此情况下,还是需要使用用户进行远程连接,因此为了使其可以远程需要进行如下操作: 一.允许root用户在任何地方进行远程登录,并具有所有库 ...

  6. Ubuntu下Git服务端搭建

    1安装git $ sudo add-apt-repository ppa:git-core/ppa $ sudo apt-get update $ sudo apt-get install git 测 ...

  7. no-cache、max-age=0、must-revalidate区别

    之前深入搜索了多次,根据stackoverflow的回答进行一些总结(http://stackoverflow.com/questions/18148884/difference-between-no ...

  8. Altium Designer 6 快速进行差分对走线

    1: 在原理图中让一对网络前缀相同,后缀分别为_N 和_P,并且加上差分队对指示.在原理图中,让一对网络名称的前缀名相同,后缀分别为_N 和_P,左键点击Place DirectivesDiffere ...

  9. BZOJ1119: [POI2009]SLO

    1119: [POI2009]SLO Time Limit: 30 Sec  Memory Limit: 162 MBSubmit: 379  Solved: 181[Submit][Status] ...

  10. 【转】Android中Spinner下拉列表（使用ArrayAdapter和自定义Adapter实现）

    原文网址:http://embed.21ic.com/software/android/201403/31603.html 1 :Android中Spinner下拉列表(使用ArrayAdapter和 ...