box-shadow属性中,比较让人迷惑的两个属性blur、spread,很多文章都有解释,个人感觉理解起来不是很容易。
其实要搞清楚这两个值的核心是:找到这两个值在阴影效果中是如何计算的。
最近chatGPT很火,于是请教了一下
问题:blur和spread差异
我怕理解偏差,又来了一波中文的提问
看不出什么要点,直接问这两个值在作用元素时如何计算
问题:box-shadow 的 blur和 spread 属性是作用于元素时是如何计算的?
这个回答按我感觉就比较好容易理解了,大概的意思就是
blur:blur 属性是对阴影应该模糊的像素数的度量。 模糊的像素越多,阴影就越柔和。 模糊计算是通过采用阴影的原始形状并将阴影像素以围绕元素边缘的圆形图案向外扩散来完成的。 展开的像素数由 blur 属性的值决定。
spread:spread 属性通过在阴影的原始大小中添加或减去像素来确定阴影的大小。 spread 属性的计算是通过首先确定阴影的原始大小,然后根据 spread 属性的值从原始大小添加或减去像素来完成的。 如果 spread 值为正,则阴影会变大。 如果 spread 值为负,则阴影会变小。
需要注意的是,阴影的实际大小和模糊度还取决于其他因素,例如光源的位置和阴影的颜色。 这些因素可以与 blur 和 spread 属性相互作用,以创建各种不同的阴影效果。
欢迎拍砖