CSS动画后，DIV左上角的多余像素

Question

在诊断div左上角的浮动像素的原因时遇到麻烦。它仅在我添加border-radius后才出现。

仔细观察每个角，可以看到一些碎片，因为它在应用半径之前应用了直线。也许需要完全不同的技术。

CODEPEN

.contest-types { 
	border: 2px solid #BCCED4;
	border-radius: 10px;
	color: #1B2437;
	padding: 10px; 
	margin: 20px; 
	width: 500px; 
  height: 200px;
	background-color: #F9FDFF;
	position: relative;
}

.contest-types:before {
	content: '';
	width: 2px;
	height: 2px;
	background-color: #5697fc;
	position: absolute;
	left: -2px;
	top: -2px;
	display: none;
}

.contest-types:after {
	content: '';
	position: absolute;
	display: block;
	background-color: #5697fc;
}

.contest-types:hover {
	border: 2px solid #5697FC;
	background-color: #FFFFFF;
	animation: border 0.5s ease-out 1;
}


.contest-types:hover:after {
  border-radius: 10px;
	animation: border-after 0.5s ease-in-out 1;
}

.contest-types:hover:before {
	display: block;
}

@keyframes border {
	0%, 24% {
		border-color: #BCCED4;
	}

	25% {
		border-top-color: #5697fc;
	}

	49% {
		border-right-color: #BCCED4;
	}

	50% {
		border-right-color: #5697fc;
	}

	74% {
		border-bottom-color: #BCCED4;
	}

	75% {
		border-bottom-color: #5697fc;
	}

	99% {
		border-left-color: #BCCED4;
	}

	100% {
		border-color: #5697fc;
	}
}

@keyframes border-after {
	0% {
		height: 2px;
		width: 0;
		top: -2px;
		left: -2px;
		right: auto;
		bottom: auto;
	}

	24.99% {
		width: calc(100% + 2px);
		height: 2px;
		top: -2px;
		left: -2px;
		right: auto;
		bottom: auto;
	}

	25% {
		width: 2px;
		height: 0;
		top: -2px;
		right: -2px;
		left: auto;
		bottom: auto;
	}

	49.99% {
		width: 2px;
		height: calc(100% + 2px);
		top: -2px;
		right: -2px;
		left: auto;
		bottom: auto;
	}

	50% {
		width: 0;
		height: 2px;
		bottom: -2px;
		right: -2px;
		top: auto;
		left: auto;
	}

	74.99% {
		width: calc(100% + 2px);
		height: 2px;
		bottom: -2px;
		right: -2px;
		top: auto;
		left: auto;
	}

	75% {
		width: 2px;
		height: 0;
		bottom: -2px;
		left: -2px;
		right: auto;
		top: auto;
	}

	100% {
		width: 2px;
		height: calc(100% + 2px);
		bottom: -2px;
		left: -2px;
		right: auto;
		top: auto;
	}
}

      <div class="contest-types" id="group">

      </div>

Answer 1

使用overflow: hidden

.contest-types { 
	border: 2px solid #BCCED4;
	border-radius: 10px;
    overflow: hidden;
	color: #1B2437;
	padding: 10px; 
	margin: 20px; 
	width: 500px; 
  height: 200px;
	background-color: #F9FDFF;
	position: relative;
}

.contest-types:before {
	content: '';
	width: 2px;
	height: 2px;
	background-color: #5697fc;
	position: absolute;
	left: -2px;
	top: -2px;
	display: none;
}

.contest-types:after {
	content: '';
	position: absolute;
	display: block;
	background-color: #5697fc;
}

.contest-types:hover {
	border: 2px solid #5697FC;
	background-color: #FFFFFF;
	animation: border 0.5s ease-out 1;
}


.contest-types:hover:after {
  border-radius: 10px;
	animation: border-after 0.5s ease-in-out 1;
}

.contest-types:hover:before {
	display: block;
}

@keyframes border {
	0%, 24% {
		border-color: #BCCED4;
	}

	25% {
		border-top-color: #5697fc;
	}

	49% {
		border-right-color: #BCCED4;
	}

	50% {
		border-right-color: #5697fc;
	}

	74% {
		border-bottom-color: #BCCED4;
	}

	75% {
		border-bottom-color: #5697fc;
	}

	99% {
		border-left-color: #BCCED4;
	}

	100% {
		border-color: #5697fc;
	}
}

@keyframes border-after {
	0% {
		height: 2px;
		width: 0;
		top: -2px;
		left: -2px;
		right: auto;
		bottom: auto;
	}

	24.99% {
		width: calc(100% + 2px);
		height: 2px;
		top: -2px;
		left: -2px;
		right: auto;
		bottom: auto;
	}

	25% {
		width: 2px;
		height: 0;
		top: -2px;
		right: -2px;
		left: auto;
		bottom: auto;
	}

	49.99% {
		width: 2px;
		height: calc(100% + 2px);
		top: -2px;
		right: -2px;
		left: auto;
		bottom: auto;
	}

	50% {
		width: 0;
		height: 2px;
		bottom: -2px;
		right: -2px;
		top: auto;
		left: auto;
	}

	74.99% {
		width: calc(100% + 2px);
		height: 2px;
		bottom: -2px;
		right: -2px;
		top: auto;
		left: auto;
	}

	75% {
		width: 2px;
		height: 0;
		bottom: -2px;
		left: -2px;
		right: auto;
		top: auto;
	}

	100% {
		width: 2px;
		height: calc(100% + 2px);
		bottom: -2px;
		left: -2px;
		right: auto;
		top: auto;
	}
}

      <div class="contest-types" id="group">

      </div>

Answer 2

问题是动画从左上角开始，然后变为正方形。您可以移动起点，也可以使用隐藏的溢出对其进行修复。

xhrFields: {withCredentials: true}