备用素材：

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. Android自定义扁平化对话框

    平时我们开发的大多数的Android.iOS的APP,它们的风格都是拟物化设计.如今Android 4.X.iOS 7.WP8采用的是扁平化设计,可以看出扁平化设计是未来UI设计的趋势.其实扁平化设计 ...

  2. 在thread 引用pthread_t 空指针的问题

    错误 pthread_t *thr; pthread_create(thr,NULL,threadhander(),NULL); 正确 pthread_t thr; pthread_create(&a ...

  3. Nginx log

    ngx_http_log_module 模块通过指定的格式把请求写入日志.请求登陆到location处理结束的环境中.如果重定向发生在请求处理过程中,这或许与location原理不同. Example ...

  4. storm-kafka教程

    一.原理介绍   本文内容参考:https://github.com/apache/storm/tree/master/external/storm-kafka#brokerhosts (一)使用st ...

  5. web页面相关的一些常见可用字符介绍

    首先是一张图片,是一张一些字符以及想对应的HTML实体表示的对照图片.如下: 一.引号模样或内心的些字符 请选择该表格要呈现的字体: 字符以及HTML实体 描述以及说明 " " 这 ...

  6. CentOS 添加/绑定 IP

    美国VPS的独立IP相对于国内而言,是非常的便宜的.比如有些美国VPS,买5个独立IP才三美元左右一个月.当我们购买了多个独立IP时,如果你不想再联系客服而漫长的等待,那就自己手动配置吧. 一.进入/ ...

  7. android adb 常用指令

    转自:http://www.cnblogs.com/playing/archive/2010/09/19/1830799.html Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你 ...

  8. recovery编译汉化

    当BoardConfig.mk中定义了recovery的字体且为中文字体时,自动编译为中文版,否则编译为英文版 例如: BOARD_USE_CUSTOM_RECOVERY_FONT := \" ...

  9. akka简单示例-1

    刚刚开始接触akka,网上找了2个简单示例,并在公司运营机器上尝试,踩了一些坑,在此记录. 1. 本地hello world [torstan@sparkb5-i ~/akka_example/hel ...

  10. Oracle merge into 使用记录

    符合条件进行更新操作,不符合则进行插入操作． merge into myd_nsrdt n using ('as nsrsbh,'' as nsrmc, ' as nowphone,sysdate a ...