用css实现边框的动态渐变色效果，希望对各位能有一些帮助。
边框.html
<!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>边框</title><link rel="stylesheet" href="css/动态边框.css"></head><body><div>鼠标移入此处，边框变色</div></body></html>
动态边框.css
/* 初始状态，注意设置相对定位 */div {width: 300px;height: 100px;line-height: 100px;text-align: center;box-sizing: border-box;position: relative;}/* 渐变色边框 */div::before {content: "";position: absolute;left: 0;top: 0;border-top: 1px solid;border-left: 1px solid;border-image: linear-gradient(to bottom, #eda901, #d16cc7) 1 10;width: 0;height: 0;transition: all 0.4s ease-out 0s;visibility: hidden;box-sizing: border-box;}div::after {content: "";position: absolute;right: 0;bottom: 0;border-right: 1px solid;border-bottom: 1px solid;border-image: linear-gradient(to bottom, #eda901, #d16cc7) 1 10;width: 0;height: 0;transition: all 0.4s ease-out 0s;visibility: hidden;box-sizing: border-box;}div:hover::before {width: 100%;height: 100%;visibility: visible;}div:hover::after {width: 100%;height: 100%;visibility: visible;}
其实就是又在原本的div上又加了一层图层，会有边框的动态效果，如果原本的div内有想要点击的按钮，可以给需要点击的按钮再添加一个相对定位position: relative;然后给z-index属性高一点就行了。
这是原本的样子：
这是鼠标移入后的样子：
中间还会有个边框逐渐产生的效果，不过我没弄gif图，凑合着看吧。
