css实现div边框圆角渐变色

时间：2020-04-14 12:14:52 收藏：0 阅读：167

div添加渐变色后，圆角失效。所以用伪元素来实现同时圆角渐变色：

.main{
    width: 400px;
    height: 600px;
    margin: 0rem 1rem;
    padding: 0.5rem 0rem;
    text-align: center;
    background: #e8eced;
    border-radius: 0rem 0.4rem 0.4rem 0rem;
}
.main:after{
    content:‘‘;
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0.6rem;
    right: 1rem;
    background: -webkit-linear-gradient(to bottom,#5fb3fc, #46a1f4);
    background: -moz-linear-gradient(to bottom,#5fb3fc, #46a1f4);
    background: linear-gradient(to bottom,#5fb3fc, #46a1f4);
    border-radius: 0.4rem 0.5rem 0.5rem 0.4rem;
    content: ‘‘;
    z-index: -1;
}

<div class="main"></div>

原文：https://www.cnblogs.com/wangshuaicxy/p/12696798.html