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. weekend110(Hadoop)的 第七天笔记

    (2015年1月31日) 课程目录 01-storm基本概念 02-storm编程规范及demo编写 03-storm的topology提交执行 04-kafka介绍 05-kafka集群部署及客户端 ...

  2. Mondriaan's Dream - POJ 2411(状态压缩)

    题目大意:有一些1*2的矩形,现在用这些小矩形覆盖M*N的大矩形,不能重复覆盖,并且要覆盖完全,求有多少种覆盖方式. 分析:可以使用1和0两种状态来表示这个位置有没有放置,1表示放置,0表示没有放置, ...

  3. 挣值管理不是搞数字游戏(3)——进阶指标:CV、SV、CPI、SPI、EAC

    摘要: 要考PMP(Project Management Professional ),挣值管理是必考的知识.软件项目有很大的特殊性,不少人认为挣值管理不太适用于软件项目.挣值管理相关资料也比较超多, ...

  4. iScroll使用

    新公司比较喜欢用iScroll,而我对此一无所知,特此调研iScroll用法,写在这里方便查看 IScroll是移动页面上被使用的一款仿系统滚动插件. myScroll = new IScroll(& ...

  5. PHP用ajia代码写三级联动下拉

    下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...

  6. php类获取静态变量值以及调用

    <?php class Test{ public static $static_var = 20; } echo Test::$static_var;exit;

  7. leetcode第一刷_Validate Binary Search Tree

    有了上面的教训,这道题就简单多了,什么时候该更新pre是明白的了,倒是有个细节,二叉搜索树中是不同意有相等节点的,所以题目的要求用黑体字标明了.写的时候注意就能够了. class Solution { ...

  8. ColorComboBox

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...

  9. VirtualBox 运行失败

    运行 VirtualBox --help 安装 VirtualBox 后 运行 报错内核没加载问题 需要设置环境变量 内核加载的环境变量 export KERN_DIR=/usr/src/kernel ...

  10. codechef Cleaning Up 解决问题的方法

    After a long and successful day of preparing food for the banquet, it is time to clean up. There is ...