css实现阴影效果(box-shadow)
box-shadow 使用方法
设置块阴影
语法:
box-shadow:<length> <length> <length> <length> || <color>
取值:
- <length> <length> <length>? <length>? || <color>:
- 阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色
说明:
引擎类型 | Gecko | Webkit | Presto |
---|---|---|---|
Box-shadow | -moz-box-shadow | -webkit-border-shadow |
在IE中,可以使用filter:shadow来实现阴影效果, 同一个filter是可以使用多次的。由于shadow做阴影时只有两个边有效果, 换角度多投几次就行了。。
.shadow{
width: 200px; height: 300px; margin: 50px auto;
-moz-box-shadow: 0 0 10px #E0E9F0; /* FireFox */
-webkit-box-shadow: 0 0 10px #E0E9F0; /* Chrome && Safari */
box-shadow: 0 0 10px #E0E9F0; /* Opera */
filter: progid:DXImageTransform.Microsoft.Shadow(color=#EAF3F9,direction=45,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#EAF3F9,direction=135,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#EAF3F9,direction=225,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#EAF3F9,direction=315,strength=6); /* IE 6.0+ */
}
内阴影效果(偏移值都为正):
#box-shadow{ -moz-box-shadow:5px 5px 5px #999 inset; /* For Firefox3.6+ */ -webkit-box-shadow:5px 5px 5px #999 inset; /* For Chrome5+, Safari5+ */ box-shadow:5px 5px 5px #999 inset; /* For Latest Opera */}
内阴影效果(偏移值都为负):
#box-shadow2{ -moz-box-shadow:-5px -5px 5px #999 inset; /* For Firefox3.6+ */ -webkit-box-shadow:-5px -5px 5px #999 inset; /* For Chrome5+, Safari5+ */ box-shadow:-5px -5px 5px #999 inset; /* For Latest Opera */}
内阴影效果(水平偏移为负,垂直偏移为负):
#box-shadow3{ -moz-box-shadow:-5px 5px 5px #999 inset; /* For Firefox3.6+ */ -webkit-box-shadow:-5px 5px 5px #999 inset; /* For Chrome5+, Safari5+ */ box-shadow:-5px 5px 5px #999 inset; /* For Latest Opera */}
内阴影效果(水平偏移为正,垂直偏移为负):
#box-shadow4{ -moz-box-shadow:5px -5px 5px #999 inset; /* For Firefox3.6+ */ -webkit-box-shadow:5px -5px 5px #999 inset; /* For Chrome5+, Safari5+ */ box-shadow:5px -5px 5px #999 inset; /* For Latest Opera */}
* 还可以试试把某个偏移值设置为0,这时阴影的效果就只是单边的
css实现阴影效果(box-shadow)的更多相关文章
- css盒模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和 ...
- CSS 框模型( Box module )
框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...
- 如何设置box shadow的透明度
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...
- KB006: CSS 框模型( Box module )
框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...
- 通过使用CSS字体阴影效果解决hover图片时显示文字看不清的问题
1.前言 最近需要加入一个小功能,在鼠标越过图片时,提示其大小和分辨率,而不想用增加属性title来提醒,不够好看.然而发现如果文字是一种颜色,然后总有概率碰到那张图上浮一层的文字会看不到,所以加入文 ...
- CSS - Transform(Translate) abnormal shadow in firefox
问题:当在Firefox中实现动画translate时,会出现虚影的状况: 经查找相关的解决方法,父容器添加样式:outline: 1px solid transparent;//即可解决问题. 但不 ...
- 在CSS中,BOX的Padding属性的数值赋予顺序为
4种可能的情况,举例说明: padding:10px; // 四个内边距都是10px padding:5px 10px; // 上下5px 左右10px padding:5px 10px 15px; ...
- CSS边框阴影效果
ul { margin:5px 0 0 0; padding:0; list-style:none; width:300px; background:#f1f1f1; }li { border-lef ...
- CSS div阴影效果
<div class="image"><img src="default.jpg" /></div> .image{box- ...
随机推荐
- Oracle的控制文件
一.控制文件 oracle的控制文件是极其重要的文件,它是一个较小的二进制文件. 记录了当前数据库的结构信息,同时也包含数据文件及日志文件的信息以及相关的状态,归档信息等等 在参数文件中描述其位置, ...
- intellij中编译报错: The packaging for this project did not assign a file to the build artifact
原因是run configuration -> maven -> preject name -> Parameters -> command line中是install:ins ...
- Python 去剑式
Python 去剑式 种种变化,用以体演总诀.共有三百六十种变化. 用以破解普天下各门各派的剑法.「破剑式」虽只一式,但其中于天下各门各派剑法要义兼收并蓄:虽说「无招」却是以普天下剑法之招数为根基,因 ...
- Ipad Safari iframe cookie 当浏览器默认禁用第三方COOKIE
前一阵子,我们发现高版本的Safari中默认会阻止第三方cookie,如下图所示. 问题 什么是第三方cookie呢?在访问一个网站A时,网站A算作第一方,如果网站A中引用了另一个网站X(网站X的域名 ...
- IOS基础库
iOS 开发者中心 https://developer.apple.com/devcenter/ios/inde ...
- 2015 "BestCoder Cup" Champion
这场比赛我没有参加,不过就算参加了也估计是被完虐.于是看着题解把大部分题目都搞了一遍. T1:Movie(hdu 5214) 题目大意: 给出N个区间,问能否选出3个互不相交的区间. N<=10 ...
- 计算机网络(3)-----IP数据报格式
IP数据报(IP Datagram) 格式 解析 (1)版本 占4位,指IP协议的版本.通信双方使用的IP协议版本必须一致.目前广泛使用的IP协议版本号为4(即IPv4). (2)首部长度 占4位,可 ...
- java基础之 内部类
Java中的内部类共分为四种: 静态内部类static inner class (also called nested class) 成员内部类member inner class 局部内部类loca ...
- Service中事务不能回滚的解决方式(转)
1.在service方法里面如果对异常进行了捕获的话,该事务是不会进行回滚的 默认spring事务只在发生未被捕获的 runtimeexcetpion时才回滚. spr ...
- jQuery 菜单项切换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...