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. Vs 2008 解决方案的目录结构设置和管理（转）

    http://blog.csdn.net/lcj_cjfykx/article/details/8632459 MS的这个IDE,实在庞杂得恐怖.从大学开始,我就一直用VC的各个版本写程序至今,细细想 ...

  2. javascript中的 "=="

    对象之间比较比较的是引用地址 对象和其他比较,转成字符串 字符串和数字比较,字符串转成数字 布尔值和任何比较,转成数字 undefined == null NaN 和谁都不相等 javascript权 ...

  3. PAT 1017

    1017. Queueing at Bank (25) Suppose a bank has K windows open for service. There is a yellow line in ...

  4. C#_delegate EndInvoke

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. 详解 Objective-C 中的 Runtime

    公司项目用到一个三方开源库,里面有个bug,不能改动源码,我想来想去,只能通过runtime这个万能的手段来解决.但是runtime 并不怎么会用,怎么办,马上学习呗.说到runtime,它是Obje ...

  6. APUE（3）——文件I/O

    大多数情况下,我们都会利用Standard I/O Library来进行I/O操作,而这一章所讲的I/O是UNIX系统直接提供的I/O操作,且大多是Unbuffered I/O,即每一次读或写都会出现 ...

  7. nodeValue和innerHTML的比较

    <ul id="parent"> <li>1</li> <li>2</li> <li>3</li> ...

  8. 关于Eclispe插件开发起步(一)

    Eclipse中三个最吸引人的地方是: 第一是它创新性的图形API,就是SWT/JFace. 第二是它的插件机制. 第三个是利用它的插件机制开发众多功能强大的插件. 插件成就了Eclipse的今天.E ...

  9. huhamhire-hosts必备神器！

    huhamhire-hosts 不用说你就知道是干嘛用的. 上地址: https://github.com/huhamhire/huhamhire-hosts https://hosts.huhamh ...

  10. lex/flex 笔记

    Lex的匹配策略: 1. 按最长匹配原则确定被选中的单词 2. 如果一个字符串能被若干正规式匹配,则先匹配排在前面的正规式. lex源程序的写法:Lex源程序必须按照Lex语言的规范来写,其核心是一组 ...