边框动画
为边框加上动画效果，往往会让交互显得更加友好。
边框通常设置属性 border/box-shadow/outline，通过它们即可以实现不同的边框效果。
先来看一种基础的边框动画：【码上掘金】
主要是设置 outline 和 outline-offset 属性，hover 之后赋不同值，实现简单。
再看另一种边款环绕的效果动画：
来源：# Fantastic CSS border animation Coco 大佬 tql
接下来我们来拆解一下这个动画效果的实现：
Step1
首先用 conic-gradient 设置矩形的背景为渐变色，并用 border: 0.5rem dotted lime 设置虚线边框。
注意，这里还用 background-origin: border-box 调整了背景起始位置；
Step2
将 border 和 padding 进行层次区分，利用 background-clip 属性。
对比设置 3 种 clip 效果：
background-clip:border-box,border-boxbackground-clip:padding-box,border-boxbackground-clip:content-box,border-box
明显，第 2 种符合预期。
Step3
最后一步添加 border: 0.3rem dotted transparent; 然后加动效控制 conic-gradient；
--angle: 0deg;
conic-gradient(
from var(--angle),
#d53e33 0deg 90deg,
#fbb300 90deg 180deg,
#377af5 180deg 270deg,
#399953 270deg 360deg
);
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate {
to {
--angle: 360deg;
}
}
如果想去掉中间的渐变内容，只留下边框动画，设置：
/* Create a border */
border: 0.5rem solid transparent;
/* Paint an image in the border */
border-image:
conic-gradient(
from var(--angle),
#d53e33 0deg 90deg,
#fbb300 90deg 180deg,
#377af5 180deg 270deg,
#399953 270deg 360deg
) 1
;
小结
本篇核心是更加深刻地认识 3 个 CSS 属性：
1. conic-gradient
2. background-origin
3. background-clip
其中，background-origin 和 background-clip 的区别注意区分
二者都是 css3 中引入的两个跟元素背景相关的属性，它们有相同的可选值，即 border、padding、content三种，而且这两个属性表示的都是元素背景与元素边框、补白 (padding) 和内容区域之间的某种关系。
background-origin 定义的是背景位置的起始点；而 background-clip 是对背景（图片和背景色）的切割~
OK，以上便是本篇分享，希望各位工友喜欢~ 欢迎点赞、收藏、评论 🤟
我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我，安东尼陪你一起度过漫长编程岁月 🌏
😹 加我微信 ATAR53，拉你入群，定期抽奖、粉丝福利多多。只学习交友、不推文卖课~
😸 我的公众号：掘金安东尼，在上面，不止编程，更多还有生活感悟~
😺 我的 GithubPage: tuaran.github.io，它已经被维护 4 年+ 啦~
本文正在参加「金石计划 . 瓜分6万现金大奖」
