直接上代码:

<style type="text/css">
.mydiv{
   width:250px;

height:auto;

border:#909090 1px solid;

background:#fff;

color:#333;

filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);

-moz-box-shadow: 2px 2px 10px #909090;

-webkit-box-shadow: 2px 2px 10px #909090;

box-shadow:2px 2px 10px #909090;
}
</style>

for IE:
direction 阴影角度 0°为从下往上 顺时针方向
strength  阴影段长度

-moz-box-shadow: 2px 2px 10px #909090;
-webkit-box-shadow: 2px 2px 10px #909090;
box-shadow:2px 2px 10px #909090;

第一个参数是x轴阴影段长度
第二个参数是y轴阴影段长度
第三个参数是往四周阴影段长度
第四个参数是阴影段颜色

div代码:
<div class="mydiv">
    123123213123
</div>

效果如下:

来自:http://www.cnblogs.com/si-shaohua/p/4279220.html

css给div添加阴影效果的更多相关文章

  1. css 给div 添加滚动条样式hover 效果

             css .nui-scroll { margin-left: 100px; border: 1px solid #000; width: 200px; height: 100px; ...

  2. css 给div添加滚动并隐藏滚动条

    在html中 <div class="box"> <div>下面内容会单独滚动</div> <div class="scroll ...

  3. css给div添加0.5px的边框

    具体代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. Div添加阴影效果

    -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/ -webkit-box-shadow: 2px 2px 10px #909090;/*safari或 ...

  5. 使用CSS为图片添加边框的几种方法

    css的应用十分广泛,即便用在图片的效果中也是方法多样,本文下面就介绍五种为图片添加特殊效果边框的CSS写法阴影效果 通过使用带有一些padding之的背景图来添加阴影效果. HTML <img ...

  6. 使用CSS为图片添加更多趣味的5种方法

    使用Photoshop为每个图片添加某种样式虽然可行,但会是相当乏味且困难的长久工作.下面要介绍的CSS技巧将帮助你从痛苦中解脱出来! 阴影效果 通过使用带有一些padding之的背景图来添加阴影效果 ...

  7. CSS样式div

    页面中,有很多样式标签:div标签,对标签定位的地方有: 1.<head>标签里加<style>标签,在<style>标签中添加样式.如: <style> ...

  8. css实现div多边框_box-shadow模拟多边框、outline描边实现

    在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果,并且可以设置多组效果,每组参数值用逗号隔开.如果把box-shadow特性的两个偏移量 h-shadow .v-shado ...

  9. CSS之div和span标签

    div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...

随机推荐

  1. ES6 Promise 对象

    Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Pro ...

  2. 使用 Dawn 构建 React 项目

    开发一个 React 项目,通常避免不了要去配置 Webpack 和 babel 之类,以支持 commonjs 或 es 模块及各种 es 新语法,及及进行 jsx 语法的转义.当然也可以用 cre ...

  3. 【转】Spark运行过程

    http://www.cnblogs.com/1130136248wlxk/articles/6289717.html

  4. Mybatis #{ } 和 ${ } 区别

    动态 SQL 是 Mybatis 的强大特性之一,也是它优于其他 ORM 框架的一个重要原因.Mybatis 在对 sql 语句进行预编译之前,会对 sql 进行动态解析,解析为一个 BoundSql ...

  5. AIM Tech Round 4 (Div. 2)ABCD

    A. Diversity time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  6. http://codeforces.com/contest/838/problem/A

    A. Binary Blocks time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  7. Docker入门之七Dockerfile

    Dockerfile是一个文本格式的配置文本,可以使用它来创建自定义的镜像.首先我们可以先看一个dockerfile是什么样子.这里可以有一个网站不错:http://dockerfile.github ...

  8. Sql Server合并多行询数据到一行:使用自连接、FOR XML PATH('')、STUFF或REPLACE函数

    示例表 tb 数据如下 id value ----- 1 aa 1 bb 2 aaa 2 bbb 2 ccc SELECT id, [val] = ( SELECT [value] + ',' FRO ...

  9. $http设置headers来实现IE不缓存url请求的资源

    var getOrders = function(){    var deferred = $q.defer();    $http({    method:'get',    url:'/getOr ...

  10. Nhibernate/Hibernate 使用多参数存儲過程 出現could not execute query,Could not locate named parameter等錯誤解決

    <?xml version="1.0" encoding="utf-8" ?> <hibernate-mapping xmlns=" ...