【视频】CSS3渐变背景制作卡片光效边框的方法

使用CSS渐变背景制作卡片光效边框。

先简要回顾一下CSS3渐变背景的知识。CSS3的背景渐变可通过background-image设置，包括线性、径向和锥型三种渐变。线性渐变是指颜色沿着某条直线渐变过渡；径向渐变是从某一点向外逐渐过渡；锥型渐变是指颜色围绕中心点旋转渐变。

根据上述知识，可进行以下操作：

·先准备一个卡片盒子，并居中对齐样式。通过锥型渐变，可得到背景效果，并添加hover旋转动画，再覆盖内容部分即可完成制作。

该流光边框效果与之前的充电特效有异曲同工之处，都是通过隐藏动画元素实现的。知识是死的，需求是活的，只有举一反三，才能不断进步。

·下面介绍第二种发光边框：

·先准备一个卡片盒子，并居中对齐样式。

·复制一个与卡片1相同的边框。

·背景图层和边框图层的样式几乎相同。但当给背景图层添加flter：blur(10px)时，边框会发光。实际上，这是因为背景图层被模糊了，导致视差效果看起来像边框发光。

·最后也为卡片2添加hover。

今天的视频到此结束，感谢观众老爷的点赞、关注和评论。