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阴影效果

.image{box- ...

随机推荐

关于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 用户名: