Эта страница MDN немного вводит в заблуждение.
Несмотря на то, что однажды она может прийти к спецификации, они в настоящее время заявляют , что
Примечание: значения спреда или несколько теней не принимаются для этого уровня спецификации.
Чтобы поместить это в контекст, говорят они, потому что фильтр drop-shadow принимает те же параметры, имеет box-shadow, что делает имеют значение спред .
Распространение box-shadow - это простая вещь, но фильтр drop-shadow может применяться к гораздо более сложным формам, поэтому его сложнее реализовать.
Даже SVG-фильтры не имеют эквивалента, хотя можно было бы сделать что-то там, с большим трудом.
Для защиты этого MDN В статье есть окно с предупреждением
Большинство браузеров не поддерживают этот параметр; эффект не рендерится, если используется.
Ps: вот генератор фильтра SVG, который я сделал, приблизительно. Это не совсем эквивалентно тому, что делает спред box-shadow, но в некоторых случаях этого может быть достаточно.
const filtered = document.getElementById( 'filtered' );
const box_shadow = document.getElementById( 'box_shadow' );
const clipped = document.getElementById( 'clipped' );
inp.onchange = function() {
filtered.style.borderRadius = this.value;
box_shadow.style.borderRadius = this.value;
};
inp.onchange();
filtered.style.filter = clipped.style.filter = 'url( #' + spreadingBoxShadow( 20, 20, 10, 50, "blue" ) + ')';
function spreadingBoxShadow( offset_x, offset_y, blur_radius, spread_radius, color ) {
const _id = "spread-radius-" + Date.now();
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.innerHTML = `
<filter id="${ _id }" x="-100%" y="-100%" width="300%" height="300%" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-color="${ color }" result="flood" in="SourceAlpha" />
<feComposite in2="SourceAlpha" in="flood" operator="atop" result="color" />
<feMorphology operator="dilate" radius="${ spread_radius}" result="spread" in="color"/>
<feGaussianBlur in="spread" stdDeviation="${ blur_radius }" result="shadow"/>
<feOffset dx="${ offset_x }" dy="${ offset_y }" in="shadow" result="offset"/>
<feMerge result="merge">
<feMergeNode in="offset"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
`;
document.body.append( svg );
return _id;
}
#box_shadow,#filtered,#clipped > div {
width: 325px;
height: 200px;
background: green;
margin: 30px 50px 100px;
}
#box_shadow {
box-shadow: 20px 20px 10px 50px blue;
}
#clipped {
padding: 50px;
}
#clipped > div {
clip-path: polygon(50% 0, 70% 10%, 70% 80%, 0 40%);
}
.cont {
position: relative;
}
Change border-radius here: <input id="inp" value="120px 200px / 100px 0px">
<div class="cont">
Filter:<br>
<div id="filtered"></div>
Box-shadow:<br>
<div id="box_shadow"></div>
Clipped:<br>
<div id="clipped">
<div></div>
</div>
</div>