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

2019-09-10 郑州网站建设  

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

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

CSS3

认识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中添加insetKeywords后,则采用inner box-shadow了,但到底它俩的效果是怎么的呢?

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

内阴影和外阴影

CSS3动画实战: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重合部分剪切掉。

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

实际效果

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

实际代码

inner-box-shadow又是怎么实现的呢?

在box-shadow中添加insetKeywords后,就是inner-box-shadow了。

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

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

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

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

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

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

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

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

13. 对阴影盒子进行剪裁

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

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

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

实际效果

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

实际代码

模糊边框 by blur radius

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

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

实际效果

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

实际代码


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1682.html转载请标明出处,谢谢合作!
标签:
  • 时候
  • 起来
  • CSS3box-shad