详解box-shadow

今天我们来探究一下“阴影”。
  这个阴影可不是什么心理阴影。我们探究的阴影是图形学中的阴影。同学们可以先想想,在图片中有了阴影,或者使用了阴影之后,为我们的图像提供了哪些特殊的效果?在高中大家在学习美术的时候,那个时候接触素描,去画一个杯子,或者画一个球体,这个时候往往出现,老师画的很逼真,立体感、层次感很强,自己虽说画出来了,在不刻意强调的前提下容易让人们误会(滑稽脸)。
  经过老师的讲解,我们知道想让我们所画的物体,具有立体感,通常有:高光,暗面,灰面,投影(阴影),这几部分组成。说完了图形中的阴影后,来想想如何在我们的页面中绘画出阴影。这就涉及到我们今天要说的内容CSS3中的box-shadow。
  探究box-shadow
  在先说box-shadow之前,大家先来看看几张图片,具体细致的感受一下box-shadow阴影。
详解box-shadow
  一张很像纸的纸(废话),有点阴影。
详解box-shadow
  What?这也是阴影?(不要拿border来骗我好吧。。。)
详解box-shadow
  这个也用box-shadow画出来的?
  上面的这些图片确实是通过box-shadow画出来的,同学们可能有些小震惊(图一很微妙,图三很炫酷,图二有点开玩笑)。接下来我们来正式探究box-shadow的神奇黑魔法!!!!。
  box-shadow直译被称为“盒子阴影”,直译的结果与同学们的认知是相符的。CSS中存在盒模型,针对于盒模型的阴影呗。这点大家要记住,是针对于盒子(元素)的阴影,后面我们还会着重说明。
  box-shadow属性值由6部分组成。
  语法形式:
  box-shadow: offset-x offset-y blur spread color position;
  这里的position可以写在最前面。也可以像上面一样写在最后面。
  接下来我们来看看这几个属性都提供了什么样的功能?
  1.offset-x offset-y
  offset-x用于声明阴影的水平偏移,就是阴影在X轴上的位置。当值为正数,阴影就位于元素右侧,若值为负数,阴影位于元素的左侧。
  同理
  offset-y用于声明阴影的垂直偏移,就是阴影在Y轴上的位置。当值为正数,阴影就位于元素下侧,若值为负数,阴影位于元素的上侧。
  例子:
  CSS:
  .demo{
  width:100px;
  height:100px;
  background:#fcc;
  box-shadow: 10px10px;
  }
  结果:
详解box-shadow
  通过这个我们能看出来是具有阴影的,根据上面的讲解能看出来是(10px10px)向下向右偏移10个px,同理负值是向上向左偏移。接下来我们看blur
  2.blur
  blur表示阴影的模糊半径。效果与设计软件中使用的高斯模糊滤镜一样。值为0意味着阴影完全不模糊。blur值越大,边角越不锋利,阴影越朦胧。不允许负值,负值等同于0。在我们上面的例子中修改:
  CSS:
  box-shadow: 10px10px10px;
  结果:
详解box-shadow
  我们能看到阴影虚化了。
  这里要注意的是:W3C中没有规定浏览器厂商使用哪种方式实现模糊效果,反正效果与高斯模糊效果差不多就是了。但有一点我们需要注意的,那就是模糊效果会扩大阴影的面积。
详解box-shadow
  Demo0是blur半径为0的效果,可以看到阴影尺寸与元素尺寸一模一样。而demo1是blur半径为10px的效果,可以看到阴影尺寸有所扩展了,而demo2则扩展得更多一些。
  现在我们感性上认知到blur半径值大于0时会扩展阴影尺寸,那么到底扩展多少呢?那我们要先明确模糊发生的起始位置了。经过肉眼观察,模糊发生的起始位置就是阴影盒子的各边。事实也就是这样。至于发散距离blurradius(虚化半径)/ 2的距离。看的demo2中阴影尺寸已经与元素盒子重叠了,因为阴影盒子左边框向左发散了15px了,超过它俩之间10px的水平距离了。
  3.spread
  spread表示阴影的大小。当值为正数,阴影会向四周扩展。若值为负数,阴影会收缩,小于元素尺寸。默认值0会保持阴影和元素尺寸一致。
  box-shadow: 0px0px0px10px;
详解box-shadow
  在这里面我们能看到,当我们spread为10px,margin也为10px他俩是重合的,说明spread为正值,在原来的大小上(上下左右)+spread的值。当spread为为负值,再远的大小上– spread的值
  4.color
  color表示阴影的颜色。可以是任何颜色单位。这个没什么说的。
  5.position
  position表示阴影的位置,可选项。默认为外部阴影。可以通过使用inset关键字来制作内部阴影。外部阴影不用声明默认就是,想使用内部阴影需要声明inset在最前面最后都可以。
  Likethis:
  box-shadow: inset0px0px0px10px#0ff;
  效果:
详解box-shadow
  很明显阴影是在里面的。
  接下来我们也对内阴影分析一下spread以及blurradius 。
  通过上面的图我们能看出来。
  对于spread当值为正值时,可以看出内阴影从边界开始填充。至于这个边界是从border开始,还是从padding开始呢?
详解box-shadow
  CSS:
  border:10pxsolid#f0f;
  padding:10px;
  box-shadow: inset0px0px0px10px#0ff;
  我们可以看出来
  以Padding区域为起点进行向内部扩展阴影。扩展半径为spread的值,负值没有意义,没有padding区域以content区域开始。
  对于blurradius和spread类似这里就不演示了,给大家总结一下,模糊半径的值还是blurradius/2 开始位置同spread,有padding先从padding开始,没有从content开始。
  下面说一说box-shadow的层次(z-index)
  对于
  外阴影(默认情况):
详解box-shadow
  对于外阴影:高与magin低于background。
  对于内阴影:高与padding低于content。
  Box-shadow不仅可以区分内外阴影还可以,应用多个阴影进行叠加。
  每个阴影用‘,’隔开,likethis
  CSS:
  width:100px;
  height:100px;
  background:#fcc;
  padding:10px;
  border-radius:50%;
  box-shadow:120px0px0-10px#f0f,
  95px10px00px#d00,
  30px20px0-10px#cdd,
  90px-10px00px#add,
  40px-30px00px#edd;
  结果:
详解box-shadow
  层次也是后写的在后边。因为可以重叠所以我们可以写多边框的一个元素
详解box-shadow
  这样的一个准靶。(这个也就是刚开始出现的那张图片的原因)。

相关推荐