css21-边框渐变卡片（线性渐变、模糊、过渡）

发表于 分类于 ， 本文字数： 295 阅读时长 ≈ 1 分钟

焦点内容

1、主要通过在 ::before ::after 伪类区域增加渐变颜色

1
2
3
4
5
.container .box::before,
.container .box::after {
  /* 省略 */
  background: linear-gradient(45deg, #ffbc00, #ff0058);
}

2、加上外发光 blur 就很炫酷

1
2
3
4
.container .box::after {
  /* 模糊 */
  filter: blur(10px);
}

代码示例

See the Pen css21-border-color-gradient by Zen.Wu (@zenwu) on CodePen.

--------------本文结束 感谢您的阅读--------------