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

您可以通过在具有渐变背景的元素下方放置df <- data.frame(id, year, onset) after来创建效果

注意：要使其工作，需要使用纯色背景色，否则可以使用pseudo-element

＆＃13;

clip-path

＆＃13;

.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%;
}

＆＃13;

边界半径50％渐变颜色

1 个答案: