备用素材：

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. 在Eclipse中编译maven项目出的问题

    在Eclipse中编译Maven项目,运行 jetty:run 指令的时候会出错,在 JRE选项卡中加入: -Dorg.mortbay.util.URI.charset=GBK-Xms512m -Xm ...

  2. URAL 1008 - Image Encoding（bfs坑爹题）

    坑爹题,两种输入输出互相交换,裸bfs #include <stdio.h> #include <string.h> typedef struct { int x; int y ...

  3. 函数递归时，递归次数到900多时，就是抛出异常exception RuntimeError('maximum recursion depth exceeded',)

    import subprocess import multiprocessing import urllib import sys import os import pymongo import si ...

  4. php.ini的中文解释

    [PHP]  ; PHP还是一个不断发展的工具,其功能还在不断地删减  ; 而php.ini的设置更改可以反映出相当的变化,  ; 在使用新的PHP版本前,研究一下php.ini会有好处的 ;;;;; ...

  5. JS encode decode

    网上查到的全都是escape,和需要的编码不是一回事,好不容易找到的结果 保存下来以备以后使用 js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent, ...

  6. flask开发restful api系列(7)-蓝图与项目结构

    如果有几个原因可以让你爱上flask这个极其灵活的库,我想蓝图绝对应该算上一个,部署蓝图以后,你会发现整个程序结构非常清晰,模块之间相互不影响.蓝图对restful api的最明显效果就是版本控制:而 ...

  7. JSP九大隐式对象

    JSP九大隐式对象 request HttpServletRequest response HttpServletResponse session HttpSession application Se ...

  8. WinMain与WndProc以及窗口诞生过程总结

    一.int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR szCmdLine, int nCmdShow) 四个 ...

  9. Windows坐标系

    .逻辑坐标 逻辑坐标是独立于设备的,它与设备点的大小无关.使用逻辑单位,是实现"所见即所得"的基础.当程序员在调用一个画线的GDI函数LineTo,画出25.4mm(1英寸) 长的 ...

  10. 『C # 开发』VS 2008 修改默认生成代码模版

    作为Coder,或许会因为每次写代码前要把版权信息Ctrl+C/V上去而蛋疼   ╮(╯▽╰)╭ 可作为Code Copyer,又何尝不蛋疼呢,怎么会容忍作业上署上别人的姓名,学号,XXX 还是要先S ...