CSS box-shadow属性：如何单独访问各子属性

嘿，这个需求很常见——遗憾的是，CSS并没有提供box-shadow-blur、box-shadow-spread这类可以直接读取的独立子属性，没法直接从元素上拿到单个值。不过我们可以通过解析box-shadow的完整计算值来提取需要的部分，完全不用额外存储一堆冗余属性，刚好适配你做滑块控件的场景！

核心思路 #

CSS的box-shadow是一个简写属性，浏览器只会存储它的完整值，不会单独拆解存储子属性。所以我们需要两步走：

1. 获取元素计算后的完整box-shadow值
2. 用正则表达式解析这个字符串，提取出blur、spread等子值

具体实现代码 #

先写一个可复用的解析函数，能把box-shadow的各个部分拆出来：

function parseBoxShadow(element) {
  const computedShadow = window.getComputedStyle(element).boxShadow;
  
  // 处理没有设置阴影的情况
  if (computedShadow === 'none') {
    return {
      inset: false,
      offsetX: 0,
      offsetY: 0,
      blurRadius: 0,
      spreadRadius: 0,
      color: 'rgba(0, 0, 0, 0)'
    };
  }

  // 正则匹配：支持inset关键字，以及各种数值+单位的组合
  const shadowRegex = /(inset)?\s*([-+]?\d*\.?\d+)(?:px|em|rem|%)?\s*([-+]?\d*\.?\d+)(?:px|em|rem|%)?\s*([-+]?\d*\.?\d+)?(?:px|em|rem|%)?\s*([-+]?\d*\.?\d+)?(?:px|em|rem|%)?\s*(.*)/;
  const matchResult = computedShadow.match(shadowRegex);

  if (!matchResult) return null;

  return {
    inset: !!matchResult[1],
    offsetX: parseFloat(matchResult[2]) || 0,
    offsetY: parseFloat(matchResult[3]) || 0,
    blurRadius: parseFloat(matchResult[4]) || 0, // 未设置时默认0
    spreadRadius: parseFloat(matchResult[5]) || 0, // 未设置时默认0
    color: matchResult[6].trim() || '#000000'
  };
}

如何用于滑块控件 #

比如你有一个调节blur的滑块和调节spread的滑块，就可以这么用：

const targetElement = document.getElementById('your-element');
const blurSlider = document.getElementById('blur-slider');
const spreadSlider = document.getElementById('spread-slider');

// 初始化滑块值
const shadowParts = parseBoxShadow(targetElement);
blurSlider.value = shadowParts.blurRadius;
spreadSlider.value = shadowParts.spreadRadius;

// 滑块变化时更新box-shadow
blurSlider.addEventListener('input', () => {
  const updatedParts = {...shadowParts, blurRadius: blurSlider.value};
  targetElement.style.boxShadow = `${updatedParts.inset ? 'inset ' : ''}${updatedParts.offsetX}px ${updatedParts.offsetY}px ${updatedParts.blurRadius}px ${updatedParts.spreadRadius}px ${updatedParts.color}`;
});

spreadSlider.addEventListener('input', () => {
  const updatedParts = {...shadowParts, spreadRadius: spreadSlider.value};
  targetElement.style.boxShadow = `${updatedParts.inset ? 'inset ' : ''}${updatedParts.offsetX}px ${updatedParts.offsetY}px ${updatedParts.blurRadius}px ${updatedParts.spreadRadius}px ${updatedParts.color}`;
});

注意事项 #

• 如果你的元素有多个box-shadow（用逗号分隔），上面的函数只会解析第一个。如果需要处理多阴影场景，可以先把computedShadow用split(',')拆分成数组，再逐个解析。
• 正则里处理了常见的单位（px/em/rem/%），如果有其他单位，你可以自行补充到正则的单位匹配部分。
• 解析后的值是数值类型，方便直接用于滑块的value（滑块默认是数值输入）。

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