CSS로 폰트 테두리, 그라데이션, 그라데이션 테두리

text border- 폰트테두리

text-shadow:-1px 0 rgba(0,0,0,.3), 0 -1px rgba(0,0,0,.3), 1px 0 rgba(0,0,0,.3), 0 1px rgba(0,0,0,.3);

폰트테두리

---

gradient - 그라데이션

그라데이션 자동 생성 사이트 https://www.colorzilla.com/gradient-editor/

background:linear-gradient(45deg, #28c983 0%,#db157b 50%,#385eea 100%);

그라데이션

---

gradient border - 그라데이션 테두리

<ul>
    <li class="field01"></li>
    <li class="field02"></li>
    <li class="field03"></li>
    <li class="field04"></li>
    <li class="field05"></li>
</ul>

ul li{
    width:240px;
    height:240px;
    border:4px solid transparent;
    border-radius:100%;
    background-origin:border-box;
    background-clip:content-box, border-box;
    -webkit-background-clip:content-box, border-box;
    box-sizing:border-box;
}
ul li.field01{
    background-image:linear-gradient(#fff, #fff), linear-gradient(to bottom, #FAB400, #F56700);
}
ul li.field02{
    background-image:linear-gradient(#fff, #fff), linear-gradient(to bottom, #00D8BE, #009987);
}
ul li.field03{
    background-image:linear-gradient(#fff, #fff), linear-gradient(to bottom, #14C3FD, #0071DA);
}
ul li.field04{
    background-image:linear-gradient(#fff, #fff), linear-gradient(to bottom, #D14EFF, #8E17D7);
}
ul li.field05{
    background-image:linear-gradient(#fff, #fff), linear-gradient(to bottom, #FF46D6, #FF009A);
}

---

See the Pen text border, gradient, gradient border by bo-ra-na (@bo-ra-na) on CodePen.