Css3 阴影效果
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 阴影效果的更多相关文章
- HTML5 css3 阴影效果
阴影效果曾让 Web 设计师既爱又恨,现在,有了 CSS3,你不再需要 Photoshop,已经有网站在使用这个功能了,如 24 Ways website. -webkit-box-shadow: 1 ...
- css3阴影效果
http://blog.csdn.net/freshlover/article/details/7610269
- Css3阴影实例
阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样.阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样.一般可以分为: box-shadow textsh ...
- HTML 学习笔记 CSS3 (边框)
CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...
- Css - 基础的css阴影效果
基本的css3阴影效果 width:971px; height:608px; border:1px solid #ccc; background-color:#fff; filter:progid:D ...
- rem和css3的相关知识点
☆☆☆rem和css3的相关知识点☆☆☆ 一. Web front-end development engineer rem是根据页面的根元素的font-size的一个相对的单位,即 html{ fo ...
- css3 shadow为了实现各种漂亮的阴影效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- css3卡片阴影效果
1.css3阴影用到的知识点:阴影box-shadow和插入:after before HTML部分: <!DOCTYPE html> <html> <head> ...
- CSS3 之书页阴影效果
视觉如下: CSS3 之书页阴影效果: <html> <head> <meta charset="UTF-8"> <title>书页 ...
随机推荐
- [Effective C++ --018]让接口容易被正确使用,不易被误用
□第一节 什么是接口?什么是接口?百度百科的解释:两个不同系统(或子程序)交接并通过它彼此作用的部分.接口的概念贯穿于整个软件开发过程中,本文讨论的接口概念仅局限于以C++实现的class,funct ...
- windows身份验证模式和SQL server身份验证模式 有什么不同
两个验证方式是有明显不同的. 主要集中在信任连接和非信任连接. windows 身份验证相对于混合模式更加安全,使用本连接模式时候,sql不判断sa密码,而仅根据用户的windows权限来进行身份验证 ...
- 生产者/消费者问题的多种Java实现方式--转
实质上,很多后台服务程序并发控制的基本原理都可以归纳为生产者/消费者模式,而这是恰恰是在本科操作系统课堂上老师反复讲解,而我们却视而不见不以为然的.在博文<一种面向作业流(工作流)的轻量级可复用 ...
- Intent的介绍
一.Intent的介绍 Intent的中文意思是“意图,意向”,在Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作 的动作.动作涉及数据.附加数据进行描 ...
- JAVA_JDBC
测试类: 1 import java.util.ArrayList; import java.util.List; /** * 创建数据库: * 1.加载驱动 * Class.forName(&quo ...
- Fortify对移动应用安全的支持
Fortify对移动应用安全的支持http://www.docin.com/p-768827684.html
- DHCP 服务器
简介: DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,使用UDP协议工作,主要用途:给内部网络或网络服务供应商自动分配 I ...
- 百度地图SDK下载以及创建应用(申请Key)和本地导入Demo
一.百度地图SDK下载 http://lbsyun.baidu.com/sdk/download?selected=location 选择全部,然后分别下载开发包.示例代码.类参考. 二.创建应用(申 ...
- gVim多标签页
我们一般使用的文本编辑器,如:editplus.ultraEdit等都是支持多标签页的,可以同时打开多个文件,方便切换,以前gVim只能打开多个窗口,或者一个窗口切出多个窗口来编辑,自从7.0以后Vi ...
- ASP伪静态页面(不需要通过iis+ISAPI_Rewrite)
很简单的教程,献给喜欢SEO的朋友们. 不需要通过iis+ISAPI_Rewrite做基于IIS的url rewrite 一.数据库很简单使用ACCESS,Data.mdb建立一个表Article,三 ...