本文探讨了CSS中边框动画的各种实现方法，包括利用outline、background-position、渐变、clip-path、overflow和border-image等技巧。通过实例展示了如何创建无小三角问题的边框动画、角向渐变效果、边框跟随效果以及动态边框图案，提供了一种创新的前端设计思路。
}
由于 border 和 background 在盒子模型上位置的差异，视觉上会有一个很明显的错位的感觉：
要想解决这个问题，我们可以把 border 替换成 outline，因为 outline 可以设置 outline-offset。便能完美解决这个问题：
div {
outline: 1px solid #333;
outline-offset: -1px;
&:hover {
outline: none;
}
}
最后看看运用到实际按钮上的效果 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ：
其实由于背景和边框的特殊关系，使用 border 的时候，通过修改 background-position也是可以解决的，就是比较绕。
渐变的其他妙用
利用渐变，不仅仅只是能完成上述的效果。
我们继续深挖渐变，利用渐变实现这样一个背景：
div {
position: relative;
&::after {
content: ‘’;
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
}
}
注意，这里运用了元素
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
