Html 为什么'；“过滤器：投影（…）；”的t扩展半径属性工作_Html_Css

Html 为什么'；“过滤器：投影（…）；”的t扩展半径属性工作

html css

Html 为什么'；“过滤器：投影（…）；”的t扩展半径属性工作,html,css,Html,Css,根据以下说明，filter:drop shadow（offset-x offset-y blur radius spread radius color）应该可以工作，类似于普通的长方体阴影，但是当我尝试时，spread radius不起作用，因此样式无效。然后我想它可能是Firefox特有的，但当我在那里检查它时，它仍然是无效的。这有什么原因吗？有其他选择吗？这个MDN页面有点误导虽然有一天可能会出现在规格上，但他们认为注意：对于此级别的规范，不接受扩展值或多个阴影在上下文中，他们这样说是

根据以下说明，

filter:drop shadow（offset-x offset-y blur radius spread radius color）

应该可以工作，类似于普通的长方体阴影，但是当我尝试时，spread radius不起作用，因此样式无效。然后我想它可能是Firefox特有的，但当我在那里检查它时，它仍然是无效的。这有什么原因吗？有其他选择吗？

这个MDN页面有点误导

虽然有一天可能会出现在规格上，但他们认为

注意：对于此级别的规范，不接受扩展值或多个阴影

在上下文中，他们这样说是因为

下拉阴影

过滤器采用的参数与

框阴影

过滤器的参数相同，后者确实有一个值

展开一个

框阴影

是一件容易的事情，但是

下拉阴影

过滤器可以应用于更复杂的形状，因此更难实现

即使没有一个等价物，尽管可能在那里做一些东西，需要大量的工作

为了为MDN文章辩护，它有一个警告框

大多数浏览器不支持此参数；如果使用，效果将不会渲染

Ps：这是我制作的一个svg过滤器生成器，与之近似。这并不完全等同于“长方体阴影”的扩散，但在某些情况下，这可能就足够了

const filtered=document.getElementById（'filtered'）；
const box_shadow=document.getElementById（'box_shadow'）；
const clipped=document.getElementById（'clipped'）；
inp.onchange=函数（）{
filtered.style.borderRadius=此.value；
box_shadow.style.borderRadius=此.value；
};
inp.onchange（）；
filtered.style.filter=clipped.style.filter='url（#'+spreadingBoxShadow（20,20,10,50，“蓝色”）+'）；
函数spreadingBoxShadow（偏移x、偏移y、模糊半径、扩展半径、颜色）{
const_id=“扩展半径-”+Date.now（）；
const svg=document.createElements（'http://www.w3.org/2000/svg'、'svg'）；
svg.innerHTML=`
`;
document.body.append（svg）；
返回_id；
}

#box#u shadow、#筛选、#clipped>div{
宽度：325px；
高度：200px；
背景：绿色；
利润率：30px 50px 100px；
}
#箱形阴影{
盒影：20px 20px 10px 50px蓝色；
}
#剪短{
填充：50px；
}
#剪辑>分割{
剪辑路径：多边形（50%0,70%10,70%80,0.40%）；
}
续{
位置：相对位置；
}

在此处更改边界半径：
过滤器：

框阴影：

剪裁：