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"范围.跨度". 这两个东西,都是最最重要的"盒 ...
随机推荐
- Spring配置中<context:annotation-config> VS <context:component-scan>
Spring 中在使用注解(Annotation)会涉及到< context:annotation-config> 和 < context:component-scan>配置, ...
- .h(头文件) .lib(库文件) .dll(动态链接库文件) 之间的关系和作用的区分
.h头文件是编译时必须的,lib是链接时需要的,dll是运行时需要的.附加依赖项的是.lib不是.dll,若生成了DLL,则肯定也生成 LIB文件.如果要完成源代码的编译和链接,有头文件和lib就够了 ...
- 每周分享之 二 http协议(3)
本次分享http协议,共分为三部分,这是第三部分,主要讲解一个完整的http请求都经过哪些步骤,当我们在地址栏中输入网址,到返回页面都经历了什么 1.输入网址 当我们在浏览器中输入网址的时候,浏览器就 ...
- jQuery ajax的提交
1.利用jQuery中的aja提交数据,首先引入jQuery中的文件 2.jquery.form.js下载地址:http://vdisk.weibo.com/s/thY_x31gX0M-p?categ ...
- 前端基础之初识 HTML
HTML HTML(Hypertext Markup Language)即超文本标记语言,是WWW的描述语言.设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便 ...
- 用shell脚本新建shell文件并自动生成头说明信息
目标: 新建文件后,直接给文件写入下图信息 代码实现: [root@localhost test]# vi AutoHead.sh #!/bin/bash#此程序的功能是新建shell文件并自动生成头 ...
- 理解js中的运算符优先级
前言 我是有过这样的经历,获取年月日时写出这样的代码: new Date().getFullYear() 此时的我是心虚的,因为我不知道是先执行.运算还是new运算,于是赶紧贴到控制台里,哎呦
- 虚拟机中ubuntu-16.04 Linux系统下配置mysql数据库,并在windows下使用navicat远程连接
Linux系统下mysql数据库安装配置步骤: 1.在服务器上安装mysql:sudo apt-get install mysql-server sudo apt-get install mysql- ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(87)-MVC Excel导入和导出
本文示例代码下载: 链接:http://pan.baidu.com/s/1jHBdgCA 密码:hzh7 ps:Vs数据库脚本在解压目录下,修改web.config数据库链接,示例代码包含:导入,导出 ...
- WPF 快捷键读写txt
因为git提交需要写这次做的,所以我想弄个东西来帮我写 WPF可以使用快捷键,快捷键主要使用InputBindings,WPF读写文件很简单 我每次都要写 第一句标题 之后就是我写的修改 然后加上我名 ...