css 实现圆角边框和文字同时渐变的效果

因为是圆角边框，没法直接用border-image来实现
直接用一个盒子实现效果时发现文字的渐变效果就没有了，-webkit-background-clip：text这个属性加不上
查看了资料，本来想用 buy-now 盒子的after属性来实现圆角边框，可是也有冲突，实现不了
最后加了一个盒子才实现，父盒子实现圆角边框渐变效果，子盒子实现文字渐变效果
没想到小小的效果居然这么麻烦
还有个坑就是-webkit-background-clip text 和 -webkit-text-fill-color transparent 这两个属性必须加webkit前缀才可以使用，border-image实现边框渐变是要用-webkit-linear-gradient

<div class="buy-now">
 	<div class="text">马上抢</div>
</div>

.buy-now
	display inline-block
	font-size 0
	background-image: linear-gradient(white,white),linear-gradient(to right, #f0904b, #eb5b48)
	padding: 1px;
	border-radius: 10px;
	background-clip: content-box,padding-box;
	.text
		display inline-block
		padding 2px 8px
		border-radius 10px
		color #f1524e
		font-weight 500
		font-size 10px
		background-image linear-gradient(to right, #f0904b, #eb5b48)
		-webkit-background-clip text
		-webkit-text-fill-color transparent
		border none