手捉手教你撸个css渐变边框，实现王者荣耀头像框
看到UI设计了个渐变的边框，实现之后发现真像农的头像框
效果
border-image: linear-gradient
废话不多说，直接上代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{position: relative;height: 500px;width: 500px;background-color: greenyellow;margin: 10px;border: 10px solid #0f3e6c;}.box::before{content: '';height: 100%;width: 100%;position: absolute;border-width: 10px;border-style: solid;top: -10px;left: -10px;border-image: linear-gradient(to right, rgba(15, 62, 108, 0) 0%, #1BF5FE 50%,rgba(15, 62, 108, 0) 100%) 10;}.box::after{content: '';height: 100%;width: 100%;position: absolute;border-width: 10px;border-style: solid;top: -10px;left: -10px;border-image: linear-gradient(0deg, #FFFFFF00 0%, #1BF5FE 50%, #80808000 100%) 10;}</style></head><body><div class="box"></div></body></html>
