DIV左上角的CSS动画后的额外像素

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>