美文网首页网页前端开发学习必备教程
CSS3动画实战:box-shadow的多种应用

CSS3动画实战:box-shadow的多种应用

作者: WEB开发李家靖 | 来源:发表于2018-07-21 13:59 被阅读0次

    很多时候,说起来box-shadow,那很多人第一个想法就是,那不就是做阴影的吗?其实除了做阴影,还有很多很实用的效果的,今天我们就来说说box-shadow的各种应用吧!

    认识box-shadow的属性

    首先,要想很好的运用box-shadow,那就要先很好的认识理解box-shadow的各种属性,我们来一步步的了解一下吧!

    shadow pattern 默认为outset,即采用outer box-shadow。通过设置为inset时,则采用inner box-shadow。

    horizontal offset 阴影距离原位置的水平位移,正数表示向右移动,负数表示向左移动。

    vertical offset 阴影距离原位置的垂直位移,正数表示向下移动,负数表示向上移动。

    blur radius 默认值为0,阴影模糊度半径。

    spread distance 默认值为0,扩展或缩小阴影的作用面积。

    <color> 阴影颜色,默认与color属性一致。

    注意:我们可以同时设置多个阴影,而阴影的z-index值从左向右递减。

    了解清楚了这些属性后,我们就开始讲几个比较好玩的效果应用吧!

    什么是outer box-shadow 和 inner box-shadow??

    box-shadow默认情况下就是outer box-shadow,当我们在box-shadow中添加inset关键词后,则采用inner box-shadow了,但到底它俩的效果是如何的呢?

    outer-box-shadow是怎么实现的呢?

    outer-box-shadow是一个默认效果来的,也就是我们常说的阴影。

    特点:阴影落在元素的border box之外。

    实现原理:

  1. 创建一个与元素border box尺寸一致的阴影盒子;

  2. 将阴影盒子定位到于元素border box重合,并位于元素之下;

  3. 根据horizontal offset和vertical offset来相对原位置作移动;

  4. 根据spread distance缩放阴影盒子的尺寸(会改变盒子的位移);

  5. 根据blur radius对阴影盒子作加工;

  6. 最后将阴影盒子与元素border box重合部分剪切掉。

  7. inner-box-shadow又是如何实现的呢?

    在box-shadow中添加inset关键词后,就是inner-box-shadow了。

    特点:阴影落在元素的padding box之内。

    实现原理(纯个人理解):

  8. 创建一个与元素padding box尺寸一致的阴影盒子;

  9. 将阴影盒子定位到于元素padding box重合,并位于元素之上;

  10. 水平和垂直各画两条线,分别跟元素padding edge重合;(共4条分别记为left/top/right/bottom-guideline)

  11. 根据horizontal offset和vertical offset移动left/top/right/bottom-guideline。

  12. 根据spread distance移动4条线。spread distance为正数时,left-guideline向右移动,top-guideline向下移动,right-guideline向左移动和bottom-guidelien向上移动;spread distance为负数时,则相反。

  13. 根据blur radius加工元素各padding edge至其对应的guideline间的区域.

  14. 对阴影盒子进行剪裁

  15. 剪切掉不与元素padding box重叠的部分;

  16. 仅显示元素各padding edge至其对应的guideline间的区域。


  17. 模糊边框 by blur radius

    W3C中没有规定浏览器厂商使用哪种方式实现模糊效果,反正效果与高斯模糊效果差不多就是了。但有一点我们需要注意的,那就是模糊效果会扩大阴影的面积。

    第一块是blur radius为0的效果,可以看到阴影尺寸与元素尺寸一模一样。而第二块是blur radius为20px的效果,可以看到阴影尺寸有所扩展了,而第三块则扩展得更多一些。

    我们现在可以看到blur radius值大于0时会扩展阴影尺寸,那么到底扩展多少呢?那我们要先明确模糊发生的起始位置了。

  18. 对于outer-shadow-box而言,模糊发生的起始位置就是阴影盒子的各边;

  19. 对于inner-shadow-box而言,模糊发生的起始位置就是各guideline。

  20. 然后模糊效果是从发生的位置,对于水平方向的边或guideline则向垂直方向发散,对于垂直方向的边或guideline则向水平方向发散,且发散的距离相同。

    发散的距离相同,因此每个方向各发散为blur radius/2的距离。看sample3中阴影尺寸已经与元素盒子重叠了,因为阴影盒子左边框向左发散了20px了,超过它俩之间10px的水平距离了,而sample2则恰恰邻近而已。

    好了,今天就简单分析两个效果的实现,很简单很实用的两个方法。如果你也喜欢今天的内容,加个关注,我们下次继续唠呗

    相关文章

      网友评论

        本文标题:CSS3动画实战:box-shadow的多种应用

        本文链接:https://www.haomeiwen.com/subject/tijhmftx.html