关于css样式中border-radius和border-image不兼容问题

关于css样式中border-radius和border-image不兼容解决办法

实现效果如下：

之前一直使用

width: 120px;
height: 120px;
background: #FFFFFF;
border: 8px solid;
border-image: linear-gradient(0deg, #A002DF, #045DFE) 10 10;
border-radius: 50%;

这种方式，效果总是达不到，笔者经过多次试验，可以使用外面套一层div实现，如下：

<div class="out">
		<div class="in">
			10
		</div>
</div>

<style type="text/css">
		.out{
			width: 120px;
			height: 120px;
			box-sizing: border-box;
			padding: 10px;
			border-radius: 100%;
			background-image: linear-gradient(90deg,rgba(160, 2, 223, 1), rgba(4, 93, 254, 1));
		}
		.in{
			width: 100%;
			height: 100%;
			border-radius: 100%;
			background: #ccc;
			text-align: center;
			line-height: 100px;
			font-size: 40px;
		}
	</style>

这样就可以解决border-radius和border-image不兼容的问题啦。