如何给div加上一个渐变色的border并且还带有圆角

 这个问题难在还需要圆角

自带的属性设置渐变色border时会让圆角属性失效

所以我在网上冲浪了许久找到一个办法

首先我们写一个div

/**
    外面的border
 */
.radioContent {
    width: 500px;
    min-height: 500px;
    position: relative;
    z-index: 1000;
    border: 1px solid transparent;
    border-radius: 30px;

    background-image: linear-gradient(#8A7B6C, #A8544D)!important;
}

设置好宽高定位设置为relative

然后给border设置为透明的

然后设置伪类：：after

/**
里面的div
 */
.radioContent::after {
    position: absolute;
    width: 490px;
    height: 490px;
    top: 5px;bottom: -5px;
    left: 5px;right: -5px;
    background-color: red;
    content:\'\';
    z-index: -10;
    border-radius: 30px;
}

即可