具有半径背景转换的CSS闪烁

Question

我正在构建一个聚焦HTML元素的脚本。一个问题是匹配聚焦元素的边界半径，我使用径向渐变解决了该问题（请参见Inner border-radius on a table cell）。

但是，当在两个元素之间转换时，焦点元素上会出现一种白色边框（[H0]元素与它的阴影在my example之间[自动触发转换]。]

const hello = document.getElementById('hello');
var target = 'blue';
var radius = '';
var left = '';
var width = '';
var y = '';

focus();
setInterval(() => focus(), 3000);

function focus() {
	if (target === 'blue') {
  	radius = '5px';
    left = '50px';
    width = '100px';
    y = '50px';
  } else {
  	radius = '25px';
    left = '300px';
    width = '200px';
    y = '100px';
  }
  hello.style.top = y;
  hello.style.left = left;
  hello.style.width = width;
hello.style.background =
           `radial-gradient(farthest-side at bottom left, transparent 98%, #000000bb 100%) top right,
            radial-gradient(farthest-side at bottom right,transparent 98%, #000000bb 100%) top left,
            radial-gradient(farthest-side at top    left, transparent 98%, #000000bb 100%) bottom right,
            radial-gradient(farthest-side at top    right,transparent 98%, #000000bb 100%) bottom left`;
            hello.style.backgroundSize = `${radius} ${radius}`;
                hello.style.backgroundRepeat = 'no-repeat';
                
                target = (target === 'blue') ? 'red' : 'blue';
}

#uno {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: blue;
  left: 50px;
  top: 50px;
}

#dos {
  position: absolute;
  width: 200px;
  height: 100px;
  border-radius: 25px;
  background-color: red;
  left: 300px;
  top: 100px;
}

#hello {
  position: fixed;
  width: 200px;
  height: 100px;
  left: 60px;
  top: 50px;
  box-shadow: 0px 0px 0px 2050px #000000bb;
  
  transition: all 2s ease;
}

<div id="uno"></div>
<div id="dos"></div>
<div id="hello"></div>

这是“ hello”焦点元素的样式：

/* shadow that hides rest of the page */
box-shadow: 0px 0px 0px 2050px #000000bb;
/* having a smooth transition on width, height and background */
transition: all 2s ease;

闪闪发光的效果似乎not出现在Firefox上，所以也许是与铬有关的问题。

[如果您只有Firefox，下面是小提琴的屏幕截图：

您知道问题可能来自哪里吗？

Answer 1

这是由于background-size与background-position结合使用了百分比值（是的，因此right，bottom等关键字等价于百分比）。您可能还会注意到，由于位置在此没有变化，因此在左/上角不会发生这种情况。

避免这种情况的一种方法是考虑像素值而不是百分比值来定位背景。

这里是一个示例，其中我将使用CSS可变和切换类来简化您的代码：

const hello = document.getElementById('hello');

focus();
setInterval(() => focus(), 3000);

function focus() {
  hello.classList.toggle('red');
  hello.classList.toggle('blue');
}

#uno {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: blue;
  left: 50px;
  top: 50px;
}

#dos {
  position: absolute;
  width: 200px;
  height: 100px;
  border-radius: 25px;
  background-color: red;
  left: 300px;
  top: 100px;
}

#hello {
  position: fixed;
  height: 100px;
  box-shadow: 0px 0px 0px 2050px #000000bb;
  background:
     radial-gradient(farthest-side at bottom left, transparent 98%, #000000bb 100%) var(--l) 0,
     radial-gradient(farthest-side at bottom right,transparent 98%, #000000bb 100%) 0 0,
     radial-gradient(farthest-side at top    left, transparent 98%, #000000bb 100%) var(--l) var(--t),
     radial-gradient(farthest-side at top    right,transparent 98%, #000000bb 100%) 0 var(--t);
  background-size:var(--s) var(--s);
  background-repeat:no-repeat;
  transition: all 2s ease;
}

.blue {
  left:50px;
  top:50px;
  width: 100px;
  border-radius:5px;
  --s:5px;
  --t:95px; /* height - border-radius */
  --l:95px; /* width  - border-radius */
}
.red {
  left:300px;
  top:100px;
  width: 200px;
  border-radius:25px;
  --s:25px;
  --t:75px;  /* height - border-radius */
  --l:175px; /* width  - border-radius */
}

<div id="uno"></div>
<div id="dos"></div>
<div id="hello" class="red"></div>