边框（border），平时最常用的样式之一，它可以设置宽度、样式和颜色。以前需求都比较单纯，颜色使用单色就能满足要求，但是现在不一样了，用户审美提高了，要求就三点：好看！好看！还是TM的好看！OK，那么话不多说，直接进入正文。

首先，对边框的颜色测试了线性渐变函数，发现果然是不支持的

这里选择使用伪类元素来实现效果

代码如下

.btn {
	position: relative;
	color: #23b7cb;
	font-size: 15px;
	padding: 5px 15px;
	background: #fff;
	border-style: hidden;
	border-radius: 30px;
}

.btn:after {
	content: '';
	position: absolute;
	top: -2px;
	bottom: -2px;
	left: -2px;
	right: -2px;
	background: linear-gradient(to right, #0396ff, #21f7e8);
	border-radius: 30px;
	z-index: -1;
}

border-image，顾名思义：指定边框的图片，这里可以传入线性渐变函数来实现渐变效果

代码如下

.btn {
	color: #23b7cb;
	font-size: 15px;
	padding: 5px 15px;
	border: 2px transparent solid;
	border-image: linear-gradient(to right, #0396ff, #21f7e8) 1 10;
}

虽然实现了渐变效果，但是它只能实现直角边框，无法使用border-radius来实现圆角效果，随后我查询到了 clip-path 裁剪属性，效果如下

代码如下

.btn {
	color: #23b7cb;
	font-size: 15px;
	padding: 5px 15px;
	border: 4px transparent solid;
	border-image: linear-gradient(to right, #0396ff, #21f7e8) 1 10;
	clip-path: inset(0 round 4px);
}

clip-path的更多用法请自行百度