CSS3 box-shadow(阴影使用)
from: http://jingyan.baidu.com/article/03b2f78c4d9fae5ea237aea6.html
css3 box-shadow 内阴影与外阴影
1-
box-shadow具体使用方法,语法:
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}换句说:对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
取值:投放方式:默认是外阴影 ,
box-shadow属性至多有6个参数设置,他们分别取值:
阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影,也就是说设置阴影类型为“inset”时,其投影就是内阴影;
X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边;
Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部;
阴影模糊半径:此参数是可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小
-moz-box-shadow:5px 5px 5px #999 inset; -webkit-box-shadow:5px 5px 5px #999 inset; box-shadow:5px 5px 5px #999 inset;

-moz-box-shadow:-5px -5px 5px #999 inset; -webkit-box-shadow:-5px -5px 5px #999 inset; box-shadow:-5px -5px 5px #999 inset;

CSS3 box-shadow(阴影使用)的更多相关文章
- 分享div、text、Box Shadow(阴影)演示及代码的页面
附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html
- css3 box
一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...
- CSS3实现带阴影的弹球
实现div上下跳动时,底部阴影随着变化 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- css3照片墙+曲线阴影
css3照片墙+曲线阴影 最近在学习jquery,晚上想复习下以前学过的知识,看到网上有关于css3照片墙的,感觉挺好玩的,就做了做.(以下图片均来自网络) 一.css3照片墙 html部分: < ...
- 转载---CSS3实现曲线阴影和翘边阴影
预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...
- CSS3知识之阴影box-shadow
一.定义和用法 box-shadow 属性向框添加一个或多个阴影. box-shadow: h-shadow v-shadow blur spread color inset; h-shadow ...
- CSS3 文本效果(阴影)
CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...
- Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器。
Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...
- CSS3的文字阴影—text-shadow
text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影. 这个属性可以有两个作用,产生阴影和模糊 ...
随机推荐
- z
360导航_新一代安全上网导航 http://www.codeproject.com/Articles/636730/Distributed-caching-using-Redis-server-wi ...
- 【转载】nginx 并发数问题思考:worker_connections,worker_processes与 max clients
注:这个文章主要是作者一直在研究nginx作为http server和反向代理服务器时候所谓最大的max_clients和 worker_connections的计算公式, 其实最后的结论也没有卡上公 ...
- Maven浅析-1
Maven的配置 1.首先从http://maven.apache.org/download.cgi下载当前最新版本的maven. 如果不想自己安装maven的话,建议直接下binary zip文件, ...
- 【转】eclipse插件:OpenExplorer快速打开文件目录
在MyEclipse开发中常用到其中一个"Open In Explorer"的小插件,可以直接进入Windows资源管理器中打开选中文件所在的目录,在使用eclipse开发时也很需 ...
- winform 曲线(贝塞尔) 分类: WinForm 2014-12-29 16:52 109人阅读 评论(0) 收藏
<span style="font-size:14px;">//覆盖OnPaint事件</span> <span style="font-s ...
- 【Android - 框架】之ButterKnife的使用
ButterKnife可以省去控件findViewById的步骤,提高开发效率. 用法: 1.添加依赖: compile 'com.jakewharton:butterknife:5.1.1' 2.在 ...
- 通过 INotifyPropertyChanged 实现观察者模式
INotifyPropertyChanged 它的作用:向客户端发出某一属性值已更改的通知. 当属性改变时,它可以通知客户端,并进行界面数据更新.而我们不用写很多复杂的代码来更新界面数据,这样可以做到 ...
- EXCEL 如何将多个工作表或工作簿合并到一个工作表
在使用Excel 时,我们经常需要将多个工作表或工作簿合并到一个工作表中,这样我们就能快速地对数据进行分析和统计.对于一般用户而言,除了复制每个工作表后再粘贴,没有其他什么方法了.如果只是合并少数几个 ...
- 海思android4.4 SDK编译Latin输入法
原来的HiSTBAndroidV500R001C01SPC020\device\hisilicon\bigfish\packages\apps\HiLatinIME\Android.mk内容例如以下: ...
- [Javascript] Creating an Immutable Object Graph with Immutable.js Map()
Learn how to create an Immutable.Map() through plain Javascript object construction and also via arr ...