box-shadow、drop-shadow 和 text-shadow
1. box-shadow
合阴影, 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}
box-shadow属性的参数设置取值:
阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;
X-offset: 阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;
Y-offset: 阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;
阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色(已验证),建议不要省略此参数。
2. drop-shadow
filter: drop-shadow 滤镜,真正的阴影。 只有四个参数:x-offset, y-offset, 阴影模糊半径, 阴影颜色, 和box-shadow的区别:
/*还未测试,静待。。。*/
3. text-shadow
字体的阴影, 对象选择器 {text-shadow:X轴偏移量 Y轴偏移量阴影模糊半径 阴影颜色}
text-shadow属性的参数设置取值:
X-offset: 阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;
Y-offset: 阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;
阴影模糊半径:但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影颜色:设定颜色
box-shadow、drop-shadow 和 text-shadow的更多相关文章
- CSS3 笔记三(Shadow/Text/Web Fonts)
CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to ...
- Qt Quick里的图形效果:阴影(Drop Shadow)
Qt Quick提供了两种阴影效果: DropShow,阴影.这个元素会根据源图像,产生一个彩色的.模糊的新图像,把这个新图像放在源图像后面,给人一种源图像从背景上凸出来的效果. InnerShado ...
- 使用shadow dom封装web组件
什么是shadow dom? 首先我们先来看看它长什么样子.在HTML5中,我们只用写如下简单的两行代码,就可以通过 <video> 标签来创建一个浏览器自带的视频播放器控件. <v ...
- 理解Shadow DOM(一)
1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...
- html 中shadow DOM 的使用
什么是shadow DOM? An important aspect of web components is encapsulation — being able to keep the marku ...
- 【Web技术】400- 浅谈Shadow DOM
编者按:本文作者:刘观宇,360 奇舞团高级前端工程师.技术经理,W3C CSS 工作组成员. 为什么会有Shadow DOM 你在实际的开发中很可能遇到过这样的需求:实现一个可以拖拽的滑块,以实现范 ...
- 究竟什么是Shadow DOM?
shadow dom 是什么? 顾名思义,shadow dom直译的话就是影子dom,但我更愿把它理解为DOM中的DOM.因为他能够为Web组件中的 DOM和 CSS提供了封装,实际上是在浏览器渲染文 ...
- Tutorial - Deferred Rendering Shadow Mapping 转
http://www.codinglabs.net/tutorial_opengl_deferred_rendering_shadow_mapping.aspx Tutorial - Deferred ...
- OpenGL阴影,Shadow Volumes(附源程序,使用 VCGlib )
实验平台:Win7,VS2010 先上结果截图: 本文是我前一篇博客:OpenGL阴影,Shadow Mapping(附源程序)的下篇,描述两个最常用的阴影技术中的第二个,Shadow Volu ...
- (转)Shadow Map & Shadow Volume
转自:http://blog.csdn.net/hippig/article/details/7858574 shadow volume 这个术语几乎是随着 DOOM3 的发布而成为FPS 玩家和图形 ...
随机推荐
- 个人作业-Week1
问题1:程序员的优劣是否在软件开发中已经不重要了??用户实际关心的 外形,使用的乐趣和效率,自我形象,个人满足感,回忆,这么多条中,仅有效率与代码有关,而实际上用户比起效率却更在意其他这些“幺蛾子”. ...
- Android测试基础题(三)
今天接着给大家带来的是Android测试基础题(三). 需求:定义一个排序的方法,根据用户传入的double类型数组进行排序,并返回排序后的数组 俗话说的好:温故而知新,可以为师矣 packag ...
- Matlab中^2和.^2的区别
矩阵a a^2 -- 两个矩阵相乘 a.^2 -- 表示 矩阵对应位置相乘 如下: a=[ 1,2,3 4,5,6 7,8,9]; disp(a); disp(a^2); disp(a.^2); ...
- linux下从SVN checkout目录源码下来
需求:我们替换http请求为https协议,要查看全不全,得到源码中去检查,所以自动化扫源码查询.但是得先有源码包啊.源码包直接从SVN上checkout 1.下载 [root@v50 0.02 sr ...
- github教程
http://www.yangzhiping.com/tech/github.html
- JavaScript中的继承
一.原型链(默认) function Person(){}; function Student(){}; Student.prototype = new Person(); Student.proto ...
- maven报brors occurred during the build
原因分析: 此问题一般发生在eclipse保存文件并自动部署时候.本人在写项目的时候,还没等部署好,关闭了了eclipse,结果出现了这种情况.有一种产生此错误的原因是因为此项目不不是由eclipse ...
- NPOI导出Excel (C#) 踩坑 之--The maximum column width for an individual cell is 255 charaters
/******************************************************************* * 版权所有: * 类 名 称:ExcelHelper * 作 ...
- eclipse设置快速提示符
省掉废话,一个快速提示符真的能快速地提高编程效率. 下面介绍如何设置eclipse的快速提示符. 步骤如下: Windows --> preferences --> java --> ...
- Windows 7 OpenGL配置
http://blog.csdn.net/qingyang8513/article/details/45155245