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. [置顶] MySQL Cluster初步学习资料整理--安装部署新特性性能测试等

    1.1 mysql-cluster简介 简单的说,MySQLCluster实际上是在无共享存储设备的情况下实现的一种完全分布式数据库系统,其主要通过NDBCluster(简称NDB)存储引擎来实现. ...

  2. Libgdx Box2D真实---这缓释微丸（三：规则经常使用body和精灵联合）

    介绍规则body怎样和图片结合.上一篇文章我介绍了box2D的基本知识,假设你用心的话.你会搜索网上相关简单demo吧.那些我就不写了.那么假设我用图片表示我的那个body.而不是简单线条.那该怎么办 ...

  3. [ACM] 最短路算法整理（bellman_ford , SPFA , floyed , dijkstra 思想，步骤及模板）

    以杭电2544题目为例 最短路 Problem Description 在每年的校赛里,全部进入决赛的同学都会获得一件非常美丽的t-shirt. 可是每当我们的工作人员把上百件的衣服从商店运回到赛场的 ...

  4. ABAP程序执行效率和优化 ABAP Performance Examples

    一.             SQL Interface1.         Select ... Where vs. Select + Check用Select … Where语句效率比Select ...

  5. 功能丰富的 Perl：轻松调试 Perl

    http://www.ibm.com/developerworks/cn/linux/sdk/perl/culture-4/index.html

  6. LINUX系统备份

    LINUX系统备份 =========================================================== 作者: gswwgph(http://gswwgph.itp ...

  7. html5 list属性、autocomplete属性、pattern属性

    list属性的值为某个datalist元素的id,datalist也是html5中新增的属性,类似于选择框select,或者android中的autocomplete textview控件.datal ...

  8. mac mysql error You must reset your password using ALTER USER statement before executing this statement.

    安装完mysql 之后,登陆以后,不管运行任何命令,总是提示这个 step 1: SET PASSWORD = PASSWORD('your new password'); step 2: ALTER ...

  9. posix thread API列表

    互斥量: pthread_mutex_t mutex = PTHREAD_MUTEX_INITIALIZER;int pthread_mutex_init(pthread_mutex_t *mutex ...

  10. javascript中substring和substr方法

    1.substring 方法 定义:用于提取字符串中介于两个指定下标之间的字符 语法:stringObject.substring(start,stop) 参数描述: start 必需.一个非负的整数 ...