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. 【安卓小技巧】WebView设置在本页面打开网页，而不是启动浏览器打开

    使用WebView可以巧妙的在安卓APP中嵌入HTML页面, WebView wb = (WebView) findViewById(R.id.web); //找到WebView控件 wb.setWe ...

  2. Tomcat启动报错 Failed to start component [StandardServer[8005]]解决

    SEVERE: The required Server component failed to start so Tomcat is unable to start. org.apache.catal ...

  3. SQL 学习与工作日常：语句积累

    1.跨服务器连接数据表 --打开服务器配置'Ad Hoc Distributed Queries' --exec sp_configure 'show advanced options',1 --re ...

  4. 关于SWT中的布局Layout

    组件装在容器里,那么这些组件是如何布局的呢?在这之前所有的例子都是使用setBounds来 进行绝对坐标的定位的. 在实际应用过程中大都是采用布局管理器的方式来布局容器中的组件. 布局管理器定义了组件 ...

  5. 关于git reset和git revert之前的区别

    很多时候,git新手容易误操作,比如,在levelIISZ-1.4.dev分支下,运行了git pull idc cpp-1.0的结果,这样做麻烦很大,经常导致maven项目格式不正确,这个时候,可以 ...

  6. 在centos 64bit 系统中安装使用WPS office的方法

    1. 安装32位开发库: yum install xulrunner.i686 yum install libXtst.i686 2. 在官网下载 wps-office-8.1.0.3724-0.1. ...

  7. [转载]PHP 字符串替换中文

    $a = "Car 神"; $result = preg_replace('/([\x80-\xff]*)/i','',$a); var_dump($result); 参考链接:p ...

  8. 使用blktrace排查iowait cpu高的问题

    本文转自这里,blktrace在这种情况下的使用方法值得借鉴学习. ------------------------------------------------------------------ ...

  9. 【MINA】用mina做业务服之间的通信，实现业务负载均衡思路

    学习mina目的还是搭建通信架构,学完mina我们了解了如何实现客户端和服务端,也就是一个正常channel我们是知道怎么建立的 但是问题是,我们应用环境通信分为两种 1.前后端通信 其实这个比较好实 ...

  10. 使用repeater控件显示列表替代treeview

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...