Question

您可能知道盒子阴影不是盒子模型的一部分。那么什么可能是计算添加到元素的box-shadow宽度的好方法呢？

更新：我需要知道元素的总宽度，包括阴影宽度。

Answer 1

你可以简单地添加一个等于box-shadow的边距。例如：

box-shadow: 0 0 10px #008800;
margin: 10px;

如果在阴影上使用X和Y偏移，则将该值添加到阴影的长度。例如：

box-shadow: 5px 5px 10px #080;
margin: 5px 15px 15px 5px;

此处偏移量为5px，加上10px长度。在差价的情况下，我们可以继续增加保证金值以考虑到这一点。

box-shadow: 5px 5px 10px 7px #080;
margin: 12px 21px 21px 12px;

使用边距将使阴影不会与页面上的其他对象重叠。

确切的宽度因浏览器而异。每个渲染阴影都不同。如果我必须对对象进行硬计算，我猜它会是这样的（css属性供参考）

box-shadow: h-shadow v-shadow blur spread color;

盒子模型偏移将是

top = (spread - v_shadow + 0.5*blur)
right = (spread + h_shadow + 0.5*blur)
bottom = (spread + v_shadow + 0.5*blur)
left = (spread - h_shadow + 0.5*blur)

模糊系数是估计值，可能需要稍微调整一下。我个人不喜欢不使用偏移量，而是在这里显示它的使用位置

这是一个jsfiddle，可以在行动中看到它http://jsfiddle.net/YvqZV/4/

Answer 2

通过创建一个带有框阴影并返回宽度的完整函数来扩展@ samuel.molinski的答案。

function getBoxShadowWidths(boxShadow) {
  // not supporting multiple box shadow declarations for now
  if ((boxShadow.match(/(rgb|#)/g) || []).length > 1) {
    return false;
  }

  const regEx = /(\d(?=(px|\s)))/g;
  const matches = [];

  // box-shadow can have anywhere from 2-4 values, including horizontal offset, vertical offset,
  // blur, and spread. Below finds each one and pushes it into an array (regEx.exec when used in succession
  // with a global regex will find each match.
  let match = regEx.exec(boxShadow);
  while (match != null) {
    matches.push(match[0]);
    match = regEx.exec(boxShadow);
  }

  // default blur & spread to zero px if not found by the regex
  const [hOffset = 0, vOffset = 0, blur = 0, spread = 0] = matches.map(parseFloat);

  // calculate approximate widths by the distance taken up by each side of the box shadow after normalizing
  // the offsets with the spread and accounting for the added distance resulting from the blur
  // See https://msdn.microsoft.com/en-us/hh867550.aspx - "the blurring effect should approximate the
  // Gaussian blur with a standard deviation equal to HALF of the blur radius"
  const top = spread - vOffset + 0.5 * blur;
  const right = spread + hOffset + 0.5 * blur;
  const bottom = spread + vOffset + 0.5 * blur;
  const left = spread - hOffset + 0.5 * blur;

  return { top, right, bottom, left };
}

计算元素的box-shadow宽度

2 个答案: