html - 使用 border-radius 绘制理想的对称 css 边框

Question

我正在尝试使用 border-radius: 8px; 绘制边框。它完美地绘制了没有 border-radius 的对称边框，但搞砸了。我在这里做错了什么？

setTimeout(function(){
    document.getElementsByClassName('border')[0].classList.add('animate-border');
},100)

body {
  background: white;
}

.main-container {
  position:absolute; 
  top:50%; 
  left:50%;
  transform: translate(-50%, -50%); 
  width: 300px; 
  height: 460px; 
  background: ;
}

.border:before {
  border:2px solid black;
	border-radius: 8px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 0;
	border-top: 0;
	border-left: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transform: rotateZ(0) rotate(0);
    
}

.border.animate-border:before {
	opacity: 1;
	height: 100%;
  width: 100%;
  transition: opacity 0s ease,width 0.5s ease, height 0.5s 0.5s ease;
  overflow: hidden;
  transform: rotateZ(0) rotate(0);
}

.border:after {
  border: 2px solid black;
	border-radius: 8px;
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-bottom: 0;
  border-right: 0;
  opacity: 0;
  overflow: hidden;
  transform: rotateZ(0) rotate(0);
}

.border.animate-border:after {
	opacity: 1;
	height: 100%;
  width: 100%;
  overflow: hidden;
  transition: opacity 0s 1s ease,width 0.5s 1s ease, height 0.5s 1.5s ease;
  transform: rotateZ(0) rotate(0);
}

<div class='main-container border'></div>

CSS:

body {
  background: white;
}

.main-container {
  position:absolute; 
  top:50%; 
  left:50%;
  transform: translate(-50%, -50%); 
  width: 300px; 
  height: 460px; 
  background: ;
}

.border:before {
  border:2px solid black;
  border-radius: 8px;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 0;
  border-left: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transform: rotateZ(0) rotate(0);

}

.border.animate-border:before {
  opacity: 1;
  height: 100%;
  width: 100%;
  transition: opacity 0s ease,width 0.5s ease, height 0.5s 0.5s ease;
  overflow: hidden;
  transform: rotateZ(0) rotate(0);
}

.border:after {
  border: 2px solid black;
  border-radius: 8px;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-bottom: 0;
  border-right: 0;
  opacity: 0;
  overflow: hidden;
  transform: rotateZ(0) rotate(0);
}

.border.animate-border:after {
  opacity: 1;
  height: 100%;
  width: 100%;
  overflow: hidden;
  transition: opacity 0s 1s ease,width 0.5s 1s ease, height 0.5s 1.5s ease;
  transform: rotateZ(0) rotate(0);
}

Answer 1

首先，您可以在所有元素(和伪元素)中应用box-sizing: border-box 以使对齐更容易。它使浏览器在计算宽度和高度时计算边框。这解决了您的错位问题。

其次，由于您正在调整元素的大小，圆 Angular 在动画中间会被拉伸(stretch)。我认为没有简单的方法可以防止这种情况发生。但是您也可以通过为 :after 伪元素的 right 属性设置动画来伪装它，就像我在下面所做的那样。那个和更快的时间可能会让你的动画到达那里。

顺便说一句，如果你为 transform: scaleX(...) scaleY(...) 而不是 width 和 height 设置动画效果会更好，因为它们是 GPU 加速的。

setTimeout(function(){
    document.getElementsByClassName('border')[0].classList.add('animate-border');
},100)

body {
  background: white;
}

*, *:before, *:after { /* Applies to ALL elements and pseudo-elements */
  box-sizing: border-box; 
}

.main-container {
  position:absolute; 
  top:50%; 
  left:50%;
  transform: translate(-50%, -50%); 
  width: 300px; 
  height: 160px; 
  background: ;
}

.border:before {
  border:2px solid black;
	border-radius: 8px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 0;
	border-top: 0;
	border-left: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transform: rotateZ(0) rotate(0);
    
}

.border.animate-border:before {
	opacity: 1;
	height: 100%;
  width: 100%;
  transition: opacity 0s ease,width 0.5s ease, height 0.5s 0.5s ease;
  overflow: hidden;
  transform: rotateZ(0) rotate(0);
}

.border:after {
  border: 2px solid black;
	border-radius: 8px;
	content: '';
	position: absolute;
	top: 0;
	right: 6px; /* a little offset to hide the squared edge */
	width: 0;
	height: 0;
	border-bottom: 0;
  border-right: 0;
  opacity: 0;
  overflow: hidden;
  transform: rotateZ(0) rotate(0);
}

.border.animate-border:after {
	opacity: 1;
	height: 100%;
  width: 100%;
  right: 0; /* the wanted right position */
  overflow: hidden;
  transition: opacity 0s 1s ease,width 0.5s 1s ease, height 0.5s 1.5s ease,right 1s 1s ease; /* Animated 'right' so it slowly gets back to its position */
  transform: rotateZ(0) rotate(0);
}

<div class='main-container border'></div>

PS.:我更改了框的高度以使其适合此处的代码段。