技術標籤：前端css3

關於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不相容的問題啦。