为何设置box-shadow属性会为标题元素生成边框/下划线效果？

参数拆解 #

你用到的box-shadow语法为：

box-shadow: 0 26px 0 -23px #000;

box-shadow的四个长度参数从左到右分别是水平偏移量、垂直偏移量、模糊半径、扩散半径，对应参数的作用如下：

• 水平偏移量为0：阴影和元素保持水平对齐，无左右方向的偏移
• 垂直偏移量为26px：阴影整体相对于元素本身向下偏移26px
• 模糊半径为0：阴影完全无虚化，边缘清晰锐利，效果和实线边框一致
• 扩散半径为-23px：负值的扩散半径会让阴影从四周向内收缩，上下左右四个方向各收缩23px，总收缩量为扩散半径绝对值的2倍

效果形成逻辑 #

1. 阴影厚度计算：元素本身设置了height: 50px，默认状态下box-shadow的尺寸和元素完全一致，初始高度为50px。加上-23px的扩散半径后，阴影最终高度为 50px - 23px * 2 = 4px，刚好是细下划线的厚度。
2. 阴影位置计算：阴影整体向下偏移26px，加上自身4px的高度，最终阴影的垂直覆盖范围是元素下方26px到30px的位置，刚好落在标题文字的底部区域，视觉上就是文字下方的下划线。
3. display: inline-block的作用：你之前的理解是对的，inline-block属性既支持给元素设置自定义高度，又不会像block元素那样默认占满整行宽度，元素宽度会自动适配内部文字的长度，所以最终生成的下划线长度刚好和标题文字长度一致。

内容的提问来源于stack exchange，提问作者permalik