box-shadow的blur和spread的解读

2019-07-03 13:49:15 阅读：762 来源： 互联网

标签：box 模糊阴影 spread radius shadow 0px

box-shadow这个属性，大多时候自己都是用到才会去百度下其使用方式。因为这个属性有语法，通常项目中如果不是要多炫酷的效果，都是以下的语法是最常用的了。具体其他语法可以看这里box-shadow

.box-shadow{
    box-shadow: 1px 0px 0px red;
}

box-shadow有5个属性值offset-x、offset-y、blur-radius、spread-radius、color

前两个值很好理解，但后面两个值你能准确说出他们之间的区别吗？

本文主要就是对这两个属性值作详细的理解。

blur-radius：模糊距离，很多文章中说到这个属性值的时候都是说可以理解为模糊度来使用，值越大，就越模糊（一开始我也这么理解的，实际上这个理解过程中对模糊距离的定义模糊化了）

spread-radius：阴影大小（这个的定义很明确）

促使我去深入理解这个属性是因为我在使用的过程中有那么一刻，遇到了这个问题。然后就一直想这是为什么呢？

问题就是：在设置阴影右偏移时明显看到了，阴影往右边冒出来了。那为什么我在增加了个模糊度的时候，div的上下却也有了阴影呢？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>阴影右偏移</title> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	 box-shadow: 10px 0px 0px #333;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

效果图：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>阴影右偏移，并模糊了</title> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	 box-shadow: 10px 0px 5px #333;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

效果图：

解答的关键在于两点：

1.所谓阴影，就是本体的复制（某篇文章中看到了这句话，使我印象深刻）

2.模糊距离的定义（即模糊的过程理解）

先来讲讲第一点：阴影是本体的复制。

对于阴影可以理解为是本体的复制层，并于本体层叠加在一起了。

个人觉得这样的三维角度就可以很好的理解了阴影与本体的关系了。所以有时候本体设置了border-radius，阴影自然也就跟着有了圆角。然后所谓的偏移也就是阴影在本体的位置上的偏移。如果没有任何偏移实际上黑色层和黄色层是叠加在一起的。

也就是这样 box-shadow: 0px 0px 0px #333; 你是完全看不到阴影的。

模糊距离的理解

这个就要去理解图片中的模糊距离是怎样定义的。在高斯模糊这篇文章中恰恰解答了我的疑问。看懂了高斯模糊的大致原理，那就理解了，为什么效果图二的代码，div的上下却也有了阴影。而且

这里做一下补充：

当给blur-radius设置了值，无论是1px还是多少px时，阴影就会将整个图片用高斯模糊差不多的方式来进行模糊化。文章中用的是九宫格来作例子，而再想深入一层就是说，不一定是九宫格的范围来模糊中间点吧，可以是以中间点为圆心，模糊距离为半径这样的范围来加权平均是不是？那当处理到这个阴影边缘的时候，边缘点是不是也就同样被这样的范围模糊了。而这时候的模糊化不是到阴影边缘就结束了的，这个模糊化需要将阴影边缘以及周边的色块平滑模糊至底色。

在MDN开发文档中关于blur-radius就有这么一段描述

…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.

范围从阴影内半径端点的完整阴影颜色到阴影外端点的完全透明。

所以可以理解为模糊化了的阴影实际面积会比本体要稍大些。那也就看到了图二这样的效果。而且在盒子的四角可以看到其模糊程度是会比盒子边缘的模糊程度更大些。是因为这个四角的阴影色块只占了模糊范围的四分之一，而长和宽的边缘上是阴影色块是占模糊范围的二分之一。

所以网上有的文章上说“模糊距离出来是个圆的效果”，个人认为并不是的。

那么接下来一个思考就是：如何设置才能看到只有右侧模糊的阴影呢？

网上一搜，那就是增加设置spread-radius的值，并且设置为负值。 box-shadow: 10px 0px 5px #333;

spread-radius：阴影大小。

其实这个值十分的好理解，就是阴影的放大和缩小。设置1px，那就是阴影会往四周扩展1px。

像这样的 box-shadow: 0px 0px 0px 1px #333;

得到的效果就是给盒子加了个1px的边框。

而如果是设置-1px;那就是四周收缩1px;那这样怎样才能看到效果来验证呢？将x，y偏移，挪到你能看到个完整的阴影。如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>阴影完全偏移出来</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background-color:yellow;
	 box-shadow: 0px 100px 0px -10px #333;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

这样就可以明显看到阴影比本体缩小了。

现在对blur-radius和spread-radius的区别应该就很清楚了。以及两个值哪个不可以负值哪个可以有负值，也了然在心了。如果还不清楚，那肯定是没明白上面说的内容了。（结论：blur-radius不为负值；spread-radius正负可取）

在来讨论下inset这个属性值

上面的设置都是外阴影的，而inset内阴影，实际就是大小延伸的方向反过来了。可以结合镂空来理解这个内阴影。

因为内阴影实际也是一个阴影层，但它是镂空的。如下图，绿色镂空层实际上应该是这一个平面除了镂空部分，其余部分都是绿色的，而镂空部分实际就是本体的面积，但这样的效果不好画出来。

假设div宽高100px;

	 box-shadow: inset 0px 0px green; //看不到任何阴影
	 box-shadow: inset 100px 0px green;//div全是绿色了
	 box-shadow: inset 0px 100px green;//div全是绿色了

同样的因为上面说过spread-radius正负可取。

spread-radius为正值，镂空面积收缩10px

那如果是内阴影spread取负值会是什么情况呢，那就是镂空的部分增大了，也就是阴影中的本体面积增大了。但因为这些层叠起来最终能看到的是本体面积的范围。可以通过x、y偏移来验证。

 box-shadow: inset 0px 0px 0px -10px green; //镂空面积四周扩展了10px
box-shadow: inset 0px 10px 0px -10px green; //可以上下左右偏移看到效果

再来看看blur-radius

设置： box-shadow: inset 0px 0px 1px 0px green;

视觉上看到div有了border，当你把这个值增大就可以明显的看到它的模糊化了。

当你将这个值设置到相对大一点，比如50px时，整个div应该就会大约一半的面积被绿色模糊化，这是注意剩余黄色的四角依然会是圆角的效果。上面说到的高斯模糊那部分的原理一致。

blur-radius该值再设置大一点比如100px时，应该就是将整个div被绿色模糊化了，而当你再设置个spread-radius为负值时，可以看到这个div的绿色变浅了

box-shadow: inset 0px 0px 100px 0px green;//绿色模糊化了整个div
box-shadow: inset 0px 0px 100px -10px green;//中间保留了部分黄色

这是为什么，小伙伴们知道吗？

如果前面的都理解了，那你一定知道为什么的。

标签：box,模糊,阴影,spread,radius,shadow,0px
来源： https://blog.csdn.net/qq_40574071/article/details/94326686