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. [React Fundamentals] Composable Components

    To make more composable React components, you can define common APIs for similar component types. im ...

  2. [010]Try块和异常处理

    Throw表达式和try块的定义如下: 1. throw 表达式,错误检测部分使用这种表达式来说明遇到了不可处理的错误.可以说,throw 引发了异常条件. 2. try 块,错误处理部分使用它来处理 ...

  3. linux上安装ftp

    1.安装 rpm -ivh vsftpd-2.2.2-11.el6_4.1.x86_64.rpm 2.启动 service vsftpd start 3.连接 windows 命令行输入 ftp ww ...

  4. NekoHTML

    1.如何使用NekoHTML? 必须在 Java Build Path里加入 nekohtml.jar , xercesImpl.jar 以及xalan.jar.下载的NekoHTML目录中并没有xe ...

  5. 使用angular的ng-repeat遇到的一个问题

    问题描述:ng-repeat绑定的数据集动态更新之后其包裹的子元素所绑定的事件全部丢失:问题详述:问题代码如下: <style> img{width:100px;height:100px; ...

  6. XML前言

    一.前言 1.XML全称"eXtensible Markup Language"(可扩展的标记语言) 2.DTD全称"Document Type Defintion&qu ...

  7. PHP之文件目录基础操作

    我们知道,临时声明的变量是保存在内存中的,即便是静态变量,在脚本运行完毕后也会被释放掉,so,想长久保存一个变量的内容,方法之一就是写到文件中,放到硬盘或服务器上,为此文件操作就必须很熟悉. 1.文件 ...

  8. SecureCRT 7 注册码

    Name: Sherrill Ray Company:  空 Serial Number:03-40-084141 License Key: ABWGUE ZPPZ6X XHTN2S 1N7PER A ...

  9. SharePoint 学习记事（一）

    记录背景: 随着公司业务的拓展,为拿到更多的项目,让原本不太信任我们的美国大佬相信我们的实力,让在美国的销售发挥他的能力,所以公司在13年下半年筹划收购了一家美国本土的公司.大约400人的规模,这个公 ...

  10. Linux的僵尸进程产生原因及解决方法

    Linux的僵尸进程产生原因及解决方法: 1. 产生原因: 在UNIX 系统中,一个进程结束了,但是他的父进程没有等待(调用wait / waitpid)他,那么他将变成一个僵尸进程.通过ps命令查看 ...