css里阴影效果,css实现阴影效果(box-shadow)
box-shadow 使用方法
设置块阴影
语法：
box-shadow： ||
取值：
? ? || ：
阴影水平偏移值(可取正负值)；阴影垂直偏移值(可取正负值)；阴影模糊值；阴影颜色
说明：
引擎类型
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 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阴影效果
随机推荐
关于angularjs中ajax请求php接口参数个是转换的问题
mainApp.config(function($httpProvider){ $httpProvider.defaults.transformRequest = function(obj){ var ...
VS2013无调试信息
Debug模式,运行时完全正常,但是一调试就出现对话框,显示出错信息: "无法找到"XXX.exe"的调试信息,或者调试信息不匹配.未使用调试信息生成二进制文件.&quo ...
理解 OpenStack Swift (2)：架构、原理及功能 [Architecture, Implementation and Features]
本系列文章着重学习和研究OpenStack Swift,包括环境搭建.原理.架构.监控和性能等. (1)OpenStack + 三节点Swift 集群+ HAProxy + UCARP 安装和配置 ( ...
JAVA获取apk包的package和launchable-activity名称(一)
背景: 每次要获取apk包的package和launchable-activity名称都需要运行doc命令,感觉好浪费感情,因为经常记不住常常的路径,但又不想把aapt设置为环境变量 我这个工具分几步 ...
MvvmLight框架使用入门(一)
MvvmLight是比较流行的MVVM框架,相对较为简单易用.可能正因为简单,对应的帮助文档不多,对初学者就不够友好了.这里会用几篇随笔,就个人对MvvmLight的使用经验,来做一个入门的介绍. 第 ...
Windows下 使用CodeBlocks配置OpenGL开发环境
CodeBlocks版本:13.12 下载OpenGL配置文件 1.glut.dll glut32.dll放入系统盘Windows\System32文件夹 2.glut.h放入CodeBlocks安装 ...
event.keyCode|| event.which.的用法
HTML 用户名: