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. android学习日记13--数据存储之SQLite

    2.SQLite 开源轻量级数据库,支持92-SQL标准,主要用于嵌入式系统,只占几百K系统资源此外,SQLite 不支持一些标准的 SQL 功能,特别是外键约束(FOREIGN KEY constr ...

  2. jQuery执行请求demo

    Ajax教程地址 4.3.2 执行GET请求 使用jQuery来执行GET请求有多种可选的方法.最简单的方法是使用$.get(),其参数是一个URL和一个回调函数:该回调函数有两个参数:一个是从服务器 ...

  3. 第一章 01 namespace 命名空间

    一.什么是namespace? namesapce是为了防止名字冲突提供的一种控制方式. 当一个程序需要用到很多的库文件的时候,名字冲突有时无法避免.之前的解决思路是使用更长的变量名字,使用不方便. ...

  4. SerialPort基本小例

    SerialPort是用于串口通信的控件与VB6中的MSCOMM控件相似,使用很方便... vb.net CodeImports System.IO.PortsImports System.TextP ...

  5. JS类型（2）_JS学习笔记（2016.10.02）

    undefined undefined是全局对象(window)的一个特殊属性,其值是未定义的.但 typeof undefined 返回 'undefined' . 虽然undefined是有特殊含 ...

  6. javascript 获取下一个节点

    下一个节点: nextElementSibling 上一个节点 previousElementSibling <div> <select onchange="alert(t ...

  7. MongoDB基本操作

    转:http://zhidao.baidu.com/link?url=D5s4tNnP6hH0XPZkFooV-o4MQH3pNZh7C3rtLX_HtVWaIyBRhLIUyoZYfVv15l2eS ...

  8. Android——将图片加入到系统相册里面

    Adnroid中保存图片的方法可能有如下两种: 第一种是自己写方法,如下代码: public static File saveImage(Bitmap bmp) { File appDir = new ...

  9. 再跟SQL谈一谈--高级篇（一）

    1.SELECT KEYWORD ①TOP ②LIKE ③IN ④BETWEEN...AND ⑤ALIAS 2.SELECT JOIN ①JOIN | INNER JOIN ②LEFT JOIN ③R ...

  10. Java_Web _Servlet生命周期实验

    第一次加载这个servlet程序时(选择右边的servlet程序,注意servlet程序没有main函数,因此执行的是run as servlet Application ),同时执行init()方法 ...