【css灵感】渐变圆角边框

点这里查看原始纯净版内容

使用 clip-path 和 border-image 实现圆角渐变边框。

border-image 用来指定作为元素周围边框的图像:

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。

因为使用了 clip-path 裁剪后的元素,只有元素的剪切区域才能被显示,所以我们可以通过 clip-path: inset() 裁剪出带圆角的矩形元素。

点这里查看原始纯净版内容

你可能感兴趣的:(htmlcsshtml5前端)