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. 图片轮换cycle插件的运用

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

  2. CTreeCtrl 控件总结

      一 基础操作  1 插入节点 1)插入根节点 //插入根节点 HTREEITEM hRoot; CString str=L"ROOT" hRoot=nTreeCtrl.Inse ...

  3. Android（java）学习笔记128:使用proguard混淆android代码

    1.当前是有些工具比如apktool,dextojar等是可以对我们android安装包进行反编译,获得源码的.为了减少被别人破解,导致源码泄露,程序被别人盗取代码,等等.我们需要对代码进行混淆,an ...

  4. NSURLSession 请求

    参考网站:http://ningandjiao.iteye.com/blog/2010753 http://www.cocoachina.com/industry/20131106/7304.html ...

  5. C语言内存四区

    按照老版操作系统来学习,内存对于程序来讲分四区.分别是 代码区,静态区,栈,堆. 由上面程序执行的结果可知: 貌似结果就是 静态代码堆栈 静态区存放的是程序中所有静态变量和常量的值.静态区的大小是程序 ...

  6. UNIX V6内核源码剖析——unix v6 全貌

    1. UNIX V6 运行硬件环境——PDP-11/40 PDP-11/40指令和数据都是以16比特为单位.对它而言,一个字的宽度为16比特. PDP-11/40以及周边设备的寄存器被映射到内存最高位 ...

  7. eclipse引用头文件报错问题-解决方法

    最近在做一个U-BOOT相关的项目,经过几天的折腾最终放弃使用VIM和一堆附加插件.最终的出的结论是对于中大型工程项目还是要启用一些专业的IDE比较稳妥,尽管VIM提供的各种插件累加在一起足以实现专业 ...

  8. Bootloader简介

    来介绍一下Bootloader,在专用的嵌入式开发板上运行GNU/Linux 系统已经变得越来越流行.一个嵌入式Linux 系统从软件的角度看通常可以分为四个层次: 1.引导加载程序.包括固化在固件( ...

  9. 在.bashrc中，使用python获取本机IP地址(现在只支持wlan)

    其实最好的办法是写个单独的脚本去查找IP,但是如果实在不愿意单写一个脚本文件,也可以直接将代码嵌入.bashrc中 在~/.bashrc下加入下面这行代码即可使用python获取本机的wlan的IP地 ...

  10. Android的几种alert对话框

    @Override public void onClick(View v) { switch (v.getId()) { case R.id.d1: AlertDialog.Builder build ...