直接上代码:

<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. 19.Linux-USB总线驱动分析

    如下图所示,以windows为例,我们插上一个没有USB设备驱动的USB,就会提示你安装驱动程序 为什么一插上就有会提示信息? 是因为windows自带了USB总线驱动程序, USB总线驱动程序负责: ...

  2. JavaScript 实现发布消息后,距离当前时间的实现

    某条消息发布后,距离当前时间多久的时间显示 //显示发布时间的函数 function pastTime(_createTime) { //var createTime = _createTime.su ...

  3. MMORPG战斗系统随笔(四)、优化客户端游戏性能

    转载请标明出处http://www.cnblogs.com/zblade/ 说到游戏性能,这是一个永恒的话题.在游戏开发的过程中,性能问题一直是我们研发需要关注的一个节点.当然,说句客观话,很多程序员 ...

  4. linux上redis安装配置及其防漏洞配置及其攻击方法

    Linux上redis安装: 需先在服务器上安装yum(虚拟机可使用挂载的方式安装) 安装配置所需要的环境运行指令:  yum -y install gcc 进入解压文件执行make 指令进行编译 执 ...

  5. 当谈到 GitLab CI 的时候,我们该聊些什么(上篇)

    "微服务"这个概念近两年非常热,正在慢慢改变 DevOps 的思路.微服务架构把一个庞大的业务系统拆解开来,每一个组件变得更加独立自治.松耦合.但是,同时也伴随着部署单元粒度越来越 ...

  6. HTML之头部标签

    <header> head 元素元素包含了所有的头部标签元素 可以添加在头部区域的元素标签为: title,style,meta,link,script,noscript,base < ...

  7. GeoServer+PostgreSQL+PostGIS+pgRouting实现最短路径查询

    一.软件安装 GeoServer下载地址: http://geoserver.org/download/ PostgreSQL下载地址: https://www.postgresql.org/down ...

  8. Go语言备忘录:net/http包的使用模式和源码解析

    本文是晚辈对net/http包的一点浅显的理解,文中如有错误的地方请前辈们指出,以免误导! 转摘本文也请注明出处:Go语言备忘录:net/http包的使用模式和源码解析,多谢!  目录: 一.http ...

  9. nginx+tomcat+redis sesson id主从复制

       Redis与Memcached的区别:     内存利用率:使用简单的key-value存储的话,Memcached的内存利用率更高,而如果Redis采用hash结构来做key-value存储, ...

  10. 从canvas理解面向对象

    前言 据说在编程语言的发展过程中,面向对象语言的出现是为了解决GUI编程的问题而出现的.计算机一开始是用纸带,命令行等来和人进行交互,而图形界面的出现是一次重大的改进,使普通人很容易就能使用计算机. ...