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(阴影使用)的更多相关文章

  1. 分享div、text、Box Shadow(阴影)演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

  2. css3 box

    一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...

  3. CSS3实现带阴影的弹球

    实现div上下跳动时,底部阴影随着变化 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  4. css3照片墙+曲线阴影

    css3照片墙+曲线阴影 最近在学习jquery,晚上想复习下以前学过的知识,看到网上有关于css3照片墙的,感觉挺好玩的,就做了做.(以下图片均来自网络) 一.css3照片墙 html部分: < ...

  5. 转载---CSS3实现曲线阴影和翘边阴影

    预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...

  6. CSS3知识之阴影box-shadow

    一.定义和用法 box-shadow 属性向框添加一个或多个阴影. box-shadow: h-shadow v-shadow blur spread color inset; h-shadow   ...

  7. CSS3 文本效果(阴影)

    CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...

  8. IE下实现类似CSS3 text-shadow文字阴影的几种方法

    IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...

  9. Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器。

    Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...

  10. CSS3的文字阴影—text-shadow

    text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影. 这个属性可以有两个作用,产生阴影和模糊 ...

随机推荐

  1. swfupload 在ie9以上浏览器报错问题记录

    解决办法: swfuploadl.js line 840左右 SWFUpload.prototype.cleanUp if (typeof(movieElement[key]) === "f ...

  2. 放爬虫nginx

    禁止火狐浏览器访问 例子

  3. usb转串口如何配置?

    概述 USB转串口输出,在kernel启动阶段加载相应的usb转串口芯片驱动,加载成功后,可通过usb转串口与pc机端交互. 步骤 1.  在kernel配置中选中usb转串口驱动: 2.  传给内核 ...

  4. 【JAVA - 基础】之数据加密和解密

    1.Base64工具类(可逆): import java.util.HashMap; import java.util.Map; /** * Base64加解密算法 * </p> * Ba ...

  5. Android-自己定义图像资源的使用(1)

    Android-自己定义图像资源的使用 2014年4月28日 周一 天气晴朗 心情平静 本篇博文给大家介绍一下,在Android开发中经经常使用到的一些图像资源,具体内容麻烦请各位认真查看官网,下面附 ...

  6. springmvc 例

    1.结构 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRscWk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCM ...

  7. Compiling JSPs Using the Command-Line Compiler---官方

    Web Server provides the following ways of compiling JSP 2.1-compliant source files into servlets: JS ...

  8. Java基础知识强化之集合框架笔记17:List集合的特有的遍历功能

    1. List集合的特有遍历功能: size()和 get()方法结合使用 2. 代码示例: package cn.itcast_03; import java.util.ArrayList; imp ...

  9. Andoird - SQLite 数据库 基础教程

    链接来源 http://www.tutorialspoint.com/android/android_sqlite_database.htm SQLite是一个开源的SQL数据库,这个数据库把数据存储 ...

  10. mysql - 编码

    show variables like 'character%'; 通过以上命令可以查询编码情况, 不过,在安装的时候,建议选择‘gbk’这类中文编码, 如果选择的是utf8,则在处理的过程中需要进行 ...