阴影模糊半径与阴影扩展半径是以什么为参照的？

阴影模糊半径与阴影扩展半径，这两个概率不怎么懂，模糊半径和扩展半径是以哪个距离为标准来移动或扩大的呢？

比如：box-shadow:4px 4px 6px 6px #666;

这里阴影模糊半径为6px,怎么理解?是指阴影向右（下）移动4px像素基础上，在向右（下）移动6px吗（即模糊效果是在4px基础上在向外扩展6px）？

阴影扩展半径为6px, 也是这样的吗？在阴影模糊半径的基础上，再向外延展6px?

求解？

西风潇潇

2015-08-22

源自：十天精通CSS3 2-3

关注问题我要回答

7128

操作

收起

4 回答

chengiar 回答被采纳 +3 积分
2016-03-18

画一个圆你就明白了。

假设这个圆的半径是50px，spread-radius为5px，blur-radius为5px。

如果没有blur-radius，那么阴影部分就是宽度为5px的一个圆环，外径55px，内径50px。

再加上blur-radius的话，那么阴影部分就是从内径到外径的一个渐变。外径圆上没有阴影，内径圆上阴影最重。而当blur-radius！=spread-radius时，就是渐变的移位和扩展。你可以在浏览器里用审查元素，一个个的改变blur-radius的值，这样可以更直观的看到变化。

5 回复有任何疑惑可以回复我~

收起回答

西风潇潇提问者

非常感谢！完全理解了！

2016-03-19 回复有任何疑惑可以回复我~

慕丝7279871
2016-12-19

就跟卵毛一样，毛的长度和卵的体积

0 回复有任何疑惑可以回复我~

收起回答

zhangcl
2016-01-29

阴影模糊半径是指阴影的边缘模糊程度，至于为什么是以px为单位，说实话我也不清楚，总之数值越大，边缘越模糊。楼主可以多测试一下，知道了结果告诉我一下。。。

阴影扩展半径很好理解的啊：

你可以认为，阴影是一直存在的，如果不设置box-shadow属性，那么这个阴影是和本体重合的，所以看不到。

当设置了box-shadow的x,y偏移量，这个阴影就被从本体中移出来了一部分。

再来说说扩展半径，就是在阴影上增加一个类似于padding的东西，当然这个padding可以是负值。表现为阴影的宽高变大或者缩小。

0 回复有任何疑惑可以回复我~

收起回答

echo_kinchao
2015-08-24

一个是模糊的程度一个是体积的大小就好比我的手毛是模糊的话模糊程度就是我手毛的长度阴影半径就是我身材多胖

1 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

十天精通CSS3

参与学习 242633 人
解答问题 2623 个

本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备

进入课程

本课相似问答

3 回答[阴影模糊半径]和 [阴影扩展半径] 有什么区别

3 回答既然阴影模糊半径与阴影扩展半径均为可选，如何得知 box-shadow:4px 4px 6px #666; 中的 6px属于阴影模糊半径还是阴影扩展半径？

2 回答知识举例部分的 6px 算 [阴影模糊半径] 还是 [阴影扩展半径]？

2 回答[阴影模糊半径] [阴影扩展半径]都是可选，当只有一个值的时候，是值其中的哪个呢？

2 回答模糊半径和扩展半径怎么回事？多个外部阴影的时候，右下阴影，左上阴影怎么选择的？内部阴影能只选择某一条边吗？

搜索更多本课相关问答

阴影模糊半径与阴影扩展半径是以什么为参照的？

我要回答关注问题

热搜

最近搜索清空

阴影模糊半径与阴影扩展半径是以什么为参照的？

4 回答

本课相似问答

阴影模糊半径与阴影扩展半径是以什么为参照的？