边框半径50％渐变颜色

Question

我想创建一个围绕我的div的圆形边框，并使用渐变颜色。 我该如何创建它？

我想用这个linear-gradient(142deg, #ED586A, #ED844A);

我现在有这个HTML;

<div class="col-sm-2"> 
<p class="inner-text"> TITLE </p> 
</div> 

CSS：

.col-sm-2 p {border: 2px solid #e3e3e3; border-radius: 50%; height: 175px; line-height: 175px; width: 175px;} 

的jsfiddle：https://jsfiddle.net/k8wazLgz/

Answer 1

你可以通过把一个afterpseudo-element元素下面渐变背景

注创建效果：对于这个工作一个坚实的背景色，否则需要clip-path可用于

.col-sm-2 p { 
 
    border: 2px solid #e3e3e3; 
 
    border-radius: 50%; 
 
    height: 175px; 
 
    line-height: 175px; 
 
    width: 175px; 
 
    text-align: center; 
 
    position:relative; 
 
    background:#fff; 
 
} 
 

 
.col-sm-2 p:after{ 
 
    position:absolute; 
 
    content:""; 
 
    width:110%; 
 
    height:110%; 
 
    background:linear-gradient(142deg, #ED586A, #ED844A); 
 
    top:-5%; 
 
    left:-5%; 
 
    z-index:-1; 
 
    border-radius:50%; 
 
}

<div class="col-sm-2"> 
 
    <p class="inner-text">TITLE</p> 
 
</div>