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 玩家和图形 ...
随机推荐
- Android必学——AsyncTask
第一章 AsyncTask的基本构成 为是么要异步任务 1)Android单线程模型 2)耗时操作放在非主线程中执行 AsyncTask为何而生 1)子线程中跟新UI 2)封装.简化异步操作 pub ...
- 使用Navicat在oracle XE上新建表空间、用户及权限赋予
参考资料: 烂泥:使用Navicat for Oracle新建表空间.用户及权限赋予 - 烂泥行天下 - 51CTO技术博客http://ilanni.blog.51cto.com/526870/12 ...
- supermpa配置遇到的问题
环境 vs2010 supermap idesktop7.1.2 iobject7.1.2.net windowform 问题 在安装iobject7.1.2 64位时 在vs中的工具箱是不显示s ...
- linux 星际词霸安装
安装StarDict星际译王.这是linux系统中最常用的翻译软件之一,但好久没有更新了.Ubuntu14.04下直接在ubuntu软件中心中搜索stardict即可图形界面安装. 命令行安装:sud ...
- web api9
- strrchr 一个获取扩展名的方便的php函数
上传文件时,$_FILES里面的name是稳健的名称,要获取扩展名就用 strrchr(str,符号)来截取最后一个.后面的扩展名 然后用 trim 去掉特殊字符. 就可以得到扩展名了
- php 生成word的三种方式
原文地址 http://www.jb51.net/article/97253.htm 最近工作遇到关于生成word的问题 现在总结一下生成word的三种方法. btw:好像只要是标题带PHP的貌似点击 ...
- 分享公司Entity与DTO之间数据拷贝的方法
主题 最早以前自学java web的时候,数据库查询出来一个Entity对象(CMP对象).就直接传给前台展示了.并没有用到DTO对象,开始并没有觉得有什么不好...后来发现还是需要一些DTO对象来专 ...
- 如何查看编译安装的lnmp环境各自的配置参数
安装好后如何查看mysql/apache/nginx/php安装参数 查看mysql编译参数: cat /usr/local/mysql/bin/mysqlbug | grep CONFIGURE ...
- 手持设备点击响应速度,鼠标事件与touch事件的那些事
前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...