不使用border-image实现线框渐变及圆角

在实际开发中，CSS中 border 用了border-image，用border-radius圆角就会失效，所以可以通过伪元素::before或者::after，使用背景线性渐变模拟实现。

.border-test {
	width: 200px;
	height: 200px;
	position: relative;
	border: 4px solid transparent;
	background-color: #fff;
	border-top-right-radius: 50px;
	background-clip: padding-box;
}
.border-test::after {
	content: "";
	display: block;
	position: absolute;
	top: -4px;
	right: -4px;
	bottom: -4px;
	left: -4px;
	border-top-right-radius: 50px;
	background: linear-gradient(155deg,red, blue);
	z-index: -1;
}