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属性来指定阴影. 这个属性可以有两个作用,产生阴影和模糊 ...
随机推荐
- ADO数据库链接
一.数据库操作准备 // --------------------------------------------------------------------------------------- ...
- 提高效率 常用的几个xcode快捷键
能用好快捷键,不仅仅可以提高工作效率,而且让你看起来更加的自信和能干,下面几个常用的快捷键,希望对你在工作中有帮助 1.首先说明一下几个标示的意思 Command ⌘ Control ⌃ ...
- .Net设计模式_单列模式
理解 博友的经典说法:很多人排队去厕所蹲坑一样,每一次只能让一个人去蹲坑,这是一种通俗的理解. 理论上的理解则为,我们需要写一个类,这个类的作用就是控制,从而保证在整个应用程序的生命周期中,在任何时刻 ...
- eclipse运行项目特别慢,出现Java heap space溢出
在eclipse中可用为JVM设置参数:Window-->Preferences-->Java-->Installed JREs然后选中你安装的jre-->Edit--> ...
- [置顶] 获取激活码,激活myeclipse
myeclipse10.0 正式版下载地址: http://downloads.myeclipseide.com/downloads/products/eworkbench/indigo/instal ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(39)-在线人数统计探讨
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(39)-在线人数统计探讨 系列目录 基于web的网站在线统计一直处于不是很精准的状态!基本上没有一种方法可 ...
- 系统调用和中断处理的异同(以Linux MIPS为例)
在Linux下写一个驱动时候遇到的读操作性能问题,让我想一窥系统调用的处理流程,以查出问题的root cause.很多书把它和中断处理放在一起讲,但是又没有哪本书说清楚了,看来只有代码才能说明一切.以 ...
- block没那么难(三):block和对象的内存管理
本系列博文总结自<Pro Multithreading and Memory Management for iOS and OS X with ARC> 在上一篇文章中,我们讲了很多关于 ...
- SQLite查询优化性能要点
Sqlite是轻量级的,在编译之后很小,其中一个原因就是在查询优化方面比较简单,它只是运用索引机制来进行优化的,经过对SQLite的查询优化的分析以及对源代码的研究,我将SQLite的查询优总结如下: ...
- xslt语法之---基础语法
1. XSLT常用元素: 1.1 <xsl:template>:创建模板 Match属性的作用是使模板和XML元素相关联 <xsl:template match=" ...