box-shadow:#333 0 0 5px 10px;　　　　　　//上下左右有阴影
-webkit-box-shadow: #666 0px 5px 10px;

-moz-box-shadow: #666 0px 5px 10px;

box-shadow: #666 0px 5px 10px;

/* For IE 8 */

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#666')";

/* For IE 5.5 - 7 */

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#666');

#666 是阴影颜色，0px 是X轴，5px 是Y轴，10px是羽化程度

以上代码可兼容各版本浏览器

效果如下:

如果阴影要朝上

把5px改成-5px即可；

如果阴影要在div内部渲染，加一个属性inset

Css3 阴影效果的更多相关文章

  1. HTML5 css3 阴影效果

    阴影效果曾让 Web 设计师既爱又恨,现在,有了 CSS3,你不再需要 Photoshop,已经有网站在使用这个功能了,如 24 Ways website. -webkit-box-shadow: 1 ...

  2. css3阴影效果

    http://blog.csdn.net/freshlover/article/details/7610269

  3. Css3阴影实例

    阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样.阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样.一般可以分为: box-shadow textsh ...

  4. HTML 学习笔记 CSS3 (边框)

    CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...

  5. Css - 基础的css阴影效果

    基本的css3阴影效果 width:971px; height:608px; border:1px solid #ccc; background-color:#fff; filter:progid:D ...

  6. rem和css3的相关知识点

    ☆☆☆rem和css3的相关知识点☆☆☆ 一. Web front-end development engineer rem是根据页面的根元素的font-size的一个相对的单位,即 html{ fo ...

  7. css3 shadow为了实现各种漂亮的阴影效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  8. css3卡片阴影效果

    1.css3阴影用到的知识点:阴影box-shadow和插入:after before HTML部分: <!DOCTYPE html> <html> <head> ...

  9. CSS3 之书页阴影效果

    视觉如下: CSS3 之书页阴影效果: <html> <head> <meta charset="UTF-8"> <title>书页 ...

随机推荐

  1. iOS开发——UI篇OC篇&SpriteKit详解

    SpriteKit详解 SpriteKit,iOS/Mac游戏制作的新纪元 这是我的WWDC2013系列笔记中的一篇,完整的笔记列表请参看这篇总览.本文仅作为个人记录使用,也欢迎在许可协议范围内转载或 ...

  2. mysql 源码调试方法

     http://blog.itpub.net/29254281/viewspace-1847415/ 其中吕海波老师分享的内容是 <调试Oracle二三例:调试技术在日常运维中的应用>其中 ...

  3. html5中viewport使用

    html5中viewport使用 转载自:http://www.maoegg.com/the-usage-of-viewport-in-html5/ 用html5开发移动应用时往往会遇到手机的分辨率或 ...

  4. [Effective C++ --024]若所有参数皆需类型转换，请为此采用non-member函数

    引言 假设我们有这样的类: class A{ public: A(, ) {}; int num() const; int den() const; const A operator* (const ...

  5. Mailing API

    Mailing API Configuration Basic Usage Embedding Inline Attachments Mail & Local Development Work ...

  6. SQL Abstraction and Object Hydration

    SQL Abstraction and Object Hydration In the last chapter, we introduced database abstraction and a n ...

  7. linux剪切拷贝

    1.剪切 mv rename.sh  ../rename.sh  把这个文件移到上一级目录下 mv rename.sh ./pic/rename.sh 把这个文件移到 当前目录下的pic目录下,并改名 ...

  8. Android（java）学习笔记124：Android权限大全

    访问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES读取或写入登记check-in数据库属性表的权限 获取错略位置 android.permissio ...

  9. table tr分离并加圆角和阴影

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. Smarty中一些标签的使用

    Smarty中的标签和php中的标签不一样 foreach标签{foreach   from=$goods(变量名) key='键,不带$' item='值,不带$'}中间的显示内容{/foreach ...