Существует много способов создания градиентной границы, я покажу вам два способа:
- с использованием
border-image, но в этом случае border-radius не будет работать.
#grad1{
position: fixed;
top: 50%;
left: 50%;
display: block;
z-index: 2150;
color: #213848;
font-size: 15px;
line-height: 100px;
text-align: center;
border: 6px solid #dbdee0;
border-radius: 50%;
border-top: 6px solid #00b140;
width: 71px;
height: 71px;
animation: spin 2s linear infinite;
border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
набор
background-image с
background-clip, здесь вы можете использовать
border-radius:
#grad1{
position: fixed;
top: 50%;
left: 50%;
display: block;
z-index: 2150;
color: #213848;
font-size: 15px;
line-height: 100px;
text-align: center;
border-radius: 50%;
width: 71px;
height: 71px;
animation: spin 2s linear infinite;
border: double 0.5em transparent;
background-image: linear-gradient(white, white), linear-gradient(to right, red, blue);
background-origin: border-box;
background-clip: content-box, border-box;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
Вы также можете сделать это с 2-мя делениями, родительский элемент имеет нормальный градиентный фон, а дочерний элемент имеет цвет solid, а затем добавить радиус границы для обоих с небольшим дополнением к родительскому div.
EDIT Я думаю, что то, что вы хотите, не может быть сделано без использования 2 div, вот чего я достигаю, но, к сожалению, у меня есть не знаю, как сделать радиус угла: (
.radialProgressBar {
border-radius: 50%;
width: 100px;
height: 100px;
display: block;
background: #ddd;
margin: 20px;
position:relative;
background-image: linear-gradient(90deg,#0b99a6 10%,transparent 50%),linear-gradient(-18deg,#00b140 10% ,#e6e6e6 50%);
}
.radialProgressBar .overlay {
border-radius: 50%;
width: 80px;
height: 80px;
background: #fff;
position:absolute;
top:10%;
left:10%;
}
<div class="radialProgressBar">
<div class="overlay"></div>
</div>