如何优雅的实现渐变圆角边框?

23 阅读1分钟

因为boder-image和和border-radius会冲突,所以用以下方式可以优雅实现渐变圆角边框:

div {
    border-radius: 8px 8px 8px 8px;
    border: 1px solid transparent;
    background-image: linear-gradient(#121a24, #121820),// 跟背景色保持一致,根据实际情况修改
    linear-gradient(90deg, rgba(10, 229, 246, 1), rgba(51, 64, 254, 1));// 取border-image的渐变色,按实际来修改
    background-origin: border-box;
    background-clip: content-box, border-box;
}