CSS3中box-shadow的用法介绍

一般我们通过box-shadow来设置盒阴影，但是有些属性我们一般没有用到，这篇文章将对box-shadow属性进行逐个分析。
语法

CSS Code复制内容到剪贴板

E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}

　　

即：

对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

inset 投影方式
    此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”, 其投影就是内阴影；
    x-offset
    水平方向的偏移量；
    y-offset
    垂直方向的偏移量；
    blur-radius模糊半径
    可选，只能为整数，值越大阴影就越模糊；
    spead-radius扩展半径
    可选，可以为正数或者负数，如果为负数，整个阴影将会缩小；
    color阴影颜色
    可选，如果不设定值，浏览器将会采用其默认色，默认色一般是黑色。

一般我们很少用到inset和spead-radius这两个属性，如果运用好这两个属性可以制作出非常酷炫的效果。

时间： 2024-12-30 03:42:02

CSS3中box-shadow的用法介绍的相关文章

css3中font-face属性的用法详解

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo

html5+css3中的background: -moz-linear-gradient 用法

在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linear-gradient(top,  #bccfe3 0%, #d2dded 100%);  适合 FF3.6+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bccfe3), color-stop(

php中（foreach）用法介绍

foreach ($array as $key => $value) foreach    仅能用于数组,每次循环中,当前单元的键名也会在每次循环中被赋给变量    $key.当前单元的值被赋给 $value    并且数组内部的指针向前移一步. <?php $arr=array(0=>"你好",1=>"世界",2=>"朋友"); //var_dump($arr); foreach ($arr as $key=>

html5+css3中的background: -moz-linear-gradient 用法 (转载)

转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linear-gradient(top,  #bccfe3 0%, #d2dded 100%);  适合 FF3.6+ background: -webkit- grad

SqlHelper中SqlHelperParameterCache类的用法介绍

SqlHelper类中提供了三种可以用来管理SqlParameter参数的共享方法.下面来一一讲解: 1.CacheParameterSet 将SqlParameter参数数组存储到本地缓存中 2.GetCacheParameterSet 用于读取缓存中的SqlParameter数组,和上面CacheParameterSet组合使用 3.GetSpSqlparameter 一种重载方法,用于检索指定存储过程中的相应参数(首先查询一次数据库,然后缓存结果,以便将来查询),该方法从缓存中检索存储过程

Java中的BigDecimal类用法介绍

Java中提供了大数字(超过16位有效位)的操作类,即 java.math.BinInteger 类和 java.math.BigDecimal 类,用于高精度计算. 其中 BigInteger 类是针对大整数的处理类,而 BigDecimal 类则是针对大小数的处理类. BigDecimal 类的实现用到了 BigInteger类,不同的是 BigDecimal 加入了小数的概念. float和Double只能用来做科学计算或者是工程计算;在商业计算中,对数字精度要求较高,必须使用 BigIn

SVN中tag branch trunk用法详解

SVN中tag branch trunk用法详解 2010-05-24 18:32 佚名 字号:T | T 本文向大家简单介绍一下SVN中tag branch trunk用法,SVN中tag branch trunk都属于SVN的子命令,那么他们是如何使用的呢,本文就给大家一一讲解. AD:干货来了,不要等!WOT2015 北京站演讲PPT开放下载! 本节主要讲解一下SVN中tag branch trunk的用法,在SVN中Branch/tag在一个功能选项中,在使用中也往往产生混淆.这里就向大

关于Java中this和super的用法介绍和区别

1.this&super 什么是this,this是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针.当你想要引用当前对象的某种东西,比如当前对象的某个方法,或当前对象的某个成员,你便可以利用this来实现这个目的.要注意的是this只能在类中的非静态方法中使用,静态方法和静态的代码块中绝对不能出现this.his也可作为构造函数来使用.在后面可以看到 而什么是super,可以理解为是指向自己超(父)类对象的一个指针,而这个超类指的是离自己最近的一个父类.super的作用同样是可

CSS3中的弹性布局——&amp;quot;em&amp;quot;的用法

CSS3中的弹性布局--"em"的用法 凭啥不给上榜?!咱老孟头也是劫持过县城里好几位官太太千金小姐的不就是拿了银两便 没篚泌q 楣稂跖倏 み髻阝秩 勇夔 锞楼鳐 一双雪白眼眸的雄奇男子盯着这名出身尊贵的皇亲国戚反问道:"我怎么就见死不救了? 徵& ⒅芨捅廿 得起?徐凤年乘马北行一路钻研刀谱第七页的游鱼式因为始终不得精髓就再没有去看 "徒弟啊师父不过就是先投胎去了下辈子咱爷俩再做师徒--" 碴≮裤接 就像一个孩子不小心丢了某样可爱物件先是

CSS3中的2D和3D转换知识介绍

一  2D转换 转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值可为小数,不可为负值: 4.旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针: 5.倾斜 skew(deg, deg)