box-shadow是CSS中用于添加阴影的属性，它渲染在border box外但不影响布局，不改变元素尺寸或位置，也不参与盒模型计算，仅作为视觉效果存在。
box-shadow 不会影响 CSS 盒模型中盒子的布局大小。
box-shadow 是什么
box-shadow 用于给元素添加阴影效果，它渲染在元素的 border box 外部（默认情况下），但这个阴影部分不占据文档流中的空间，也不会改变元素本身的 width 和 height。
对布局的影响
即使设置了很大的模糊半径或偏移量，box-shadow 不会：
改变元素的实际尺寸 影响其他元素的排列位置 被包含在 margin、border、padding 或 content 的计算中
换句话说，两个 div，一个有 box-shadow，一个没有，在页面布局中占用的空间完全一样。
立即学习“前端免费学习笔记（深入）”；
视觉与溢出
虽然阴影不影响布局，但它仍然可能在视觉上“溢出”父容器。如果父元素设置了 overflow: hidden，那么超出部分的阴影会被裁剪掉。
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情
例如：
上面例子中，内部 div 的阴影可能会被外层容器裁掉，因为 overflow: hidden 会裁剪超出边界的视觉内容，包括阴影。
总结
box-shadow 只是视觉装饰，不会改变元素的盒模型尺寸或布局行为。它不影响 width、height、margin、padding 等计算。但如果希望看到完整阴影，需要注意父元素是否设置了 overflow:hidden。
基本上就这些。
以上就是css盒模型box-shadow对盒子大小有影响吗的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1010276.html
微信扫一扫 
支付宝扫一扫 
