css给div添加阴影效果
直接上代码:
<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添加阴影效果的更多相关文章
- css 给div 添加滚动条样式hover 效果
css .nui-scroll { margin-left: 100px; border: 1px solid #000; width: 200px; height: 100px; ...
- css 给div添加滚动并隐藏滚动条
在html中 <div class="box"> <div>下面内容会单独滚动</div> <div class="scroll ...
- css给div添加0.5px的边框
具体代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Div添加阴影效果
-moz-box-shadow: 2px 2px 10px #909090;/*firefox*/ -webkit-box-shadow: 2px 2px 10px #909090;/*safari或 ...
- 使用CSS为图片添加边框的几种方法
css的应用十分广泛,即便用在图片的效果中也是方法多样,本文下面就介绍五种为图片添加特殊效果边框的CSS写法阴影效果 通过使用带有一些padding之的背景图来添加阴影效果. HTML <img ...
- 使用CSS为图片添加更多趣味的5种方法
使用Photoshop为每个图片添加某种样式虽然可行,但会是相当乏味且困难的长久工作.下面要介绍的CSS技巧将帮助你从痛苦中解脱出来! 阴影效果 通过使用带有一些padding之的背景图来添加阴影效果 ...
- CSS样式div
页面中,有很多样式标签:div标签,对标签定位的地方有: 1.<head>标签里加<style>标签,在<style>标签中添加样式.如: <style> ...
- css实现div多边框_box-shadow模拟多边框、outline描边实现
在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果,并且可以设置多组效果,每组参数值用逗号隔开.如果把box-shadow特性的两个偏移量 h-shadow .v-shado ...
- CSS之div和span标签
div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...
随机推荐
- Linux 环境下java安装及配置
操作系统环境: Red Hat Enterpriser Linux 6.5 jdk版本: jdk1.8.0_144 1 从官网下载Linux操作系统对应的jdk版本文件 2 安装jdk 3 安装完 ...
- C语言定义从URL中获取键值的接口
环境:centos7下,对客户端http请求进行解析,来获取有效键值(包括汉字). 头文件 /* 这是一份关于从Http请求信息中提取键值的接口声明的头文件 */ #ifndef _HEAD_H_ # ...
- Android shared_preference操作
实例化SharedPreferences对象 //test :想要打开的SharedPreferences文件名 //Activity.MODE_PRIVATE:操作模式 MODE_PRIVATE | ...
- Entity Framework 之Code First自动数据迁移
using MvcShopping.Migrations; using MvcShopping.Models; using System; using System.Collections.Gener ...
- 大数据算法设计模式(2) - 左外链接(leftOuterJoin) spark实现
左外链接(leftOuterJoin) spark实现 package com.kangaroo.studio.algorithms.join; import org.apache.spark.api ...
- java 静态代码块 代码块 构造函数 静态成员变量 成员变量的初始化顺序
没有父类的情况 1,静态代码块-->静态成员变量-->成员变量(实例属性)-->代码块-->构造函数 2, 静态代码块 和 静态成员变量 只会初始化一次 有父类的情况 1,父类 ...
- GooglePlay - 文件上传限制的扩展
前言 Google Play应用商店在上传限制100MB大小,超过该大小的应用必须将超过部分以扩展文件的形式进行上传处理. 总共可上传2个扩展文件,每个最大文件可为2GB,同时obb文件格式可自选. ...
- 创建mongodb副本集操作实例
一:概念 相关概念及图片引用自这里 mongodb副本集: 副本集是一组服务器,其中一个是主服务器,用于处理客户请求:还有多个备份服务器,用于保存主服务器的数据副本.如果主服务器崩溃了,备份服务器自动 ...
- 在centos6编译配置httpd2.4的N种方法
前言 我们使用linux的过程中,一定会用到httpd这个服务,在centos7上,默认安装的httpd就是2.4版本,大家都知道,2.4版本相对之前的版本已经做了改进,用起来更加方便,但是我们的ce ...
- ModelForm
这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来,对,你没猜错,相信自己的英语水平. 先来一个简单的例子来看一下这个东西怎么用: 比如我们的数据库中有这样一 ...