利用css怎么创建渐变色边框？下面本篇文章给大家分享css实现渐变色边框的5种方法，希望对大家有所帮助！
给 border 设置渐变色是很常见的效果，实现这个效果有很多思路，今天把我所知道的方法罗列于此供大家参考。（学习视频分享：css视频教程、web前端）
1. 使用 border-image
CSS 提供了 border-image 属性用于给 border 绘制复杂图样，与 background-image 类似，我们可以在 border 中展示image和linear-gradient。
通过 border-image 设置渐变色 border 是最简单的方法，只需要两行代码：
CSS:
立即学习“前端免费学习笔记（深入）”；
div { border: 4px solid; border-image: linear-gradient(to right, #8f41e9, #578aef) 1;}/* 或者 */div { border: 4px solid; border-image-source: linear-gradient(to right, #8f41e9, #578aef); border-image-slice: 1;}
Codepen demohttps://codepen.io/mudontire/pen/xxLxeZw
这种方式虽然简单但有个明显的缺陷，不支持设置 border-radius。接下来会介绍几种支持 border-radius 的方法。
2. 使用 background-image
使用 background-image 绘制渐变色背景，并且把中间用纯色遮住应该是最容易想到的一种方法，思路是：使用两个盒子叠加，给下层的盒子设置渐变色背景和 padding，给上层盒子设置纯色背景。
HTML:
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis, accusamus tempora.
CSS:
立即学习“前端免费学习笔记（深入）”；
.border-box { width: 300px; height: 200px; margin: 25px 0;}.border-bg { padding: 4px; background: linear-gradient(to right, #8f41e9, #578aef); border-radius: 16px;}.content { height: 100%; background: #222; border-radius: 13px; /*trciky part*/}
Codepen demo
https://codepen.io/mudontire/pen/ZEJEZoY
这种方式的优点是容易理解，兼容性好，缺点是设置 content 的 border-radius 会比较 tricky，且不准确。
3. 两层元素、background-image、background-clip
为了解决方法 2 中 border-radius 不准确的问题，可以使用一个单独的元素作为渐变色背景放在最下层，上层设置一个透明的 border 和纯色的背景（需要设置 background-clip: padding-box 以避免盖住下层元素的 border）, 上下两层设置相同的 border-radius。
HTML:
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis, accusamus tempora.
CSS:
立即学习“前端免费学习笔记（深入）”；
.border-box { border: 4px solid transparent; border-radius: 16px; position: relative; background-color: #222; background-clip: padding-box; /*important*/}.border-bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; margin: -4px; border-radius: inherit; /*important*/ background: linear-gradient(to right, #8f41e9, #578aef);}
Codepen demo
https://codepen.io/mudontire/pen/yLoLrxL
4. 伪元素、方法3的简化
我们可以使用伪元素替换 div.border-bg 以简化HTML结构。
HTML:
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis, accusamus tempora.
CSS:
立即学习“前端免费学习笔记（深入）”；
.border-box { border: 4px solid transparent; border-radius: 16px; position: relative; background-color: #222; background-clip: padding-box; /*important*/}.border-box::before { content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; margin: -4px; border-radius: inherit; /*important*/ background: linear-gradient(to right, #8F41E9, #578AEF);}
Codepen demo
https://codepen.io/mudontire/pen/JjyjVwN
5. 单层元素、background-clip、background-origin、background-image
最后是我觉得最优雅的一种方法，只需要用到单层元素，为其分别设置 background-clip、background-origin、background-image 这三个属性，每个属性设置两组值，第一组用于设置border内的单色背景，第二组用于设置border上的渐变色。
HTML:
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis, accusamus tempora.
CSS:
立即学习“前端免费学习笔记（深入）”；
.border-box { border: 4px solid transparent; border-radius: 16px; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);}
Codepen demo
https://codepen.io/mudontire/pen/wvqvZZO
目前就能想到这5种方法，个人推荐优先使用4和5，如果有其他更好的方法，欢迎大家补充。
更多编程相关知识，请访问：编程入门！！
以上就是利用CSS怎么创建渐变色边框？5种方法分享的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1621777.html
微信扫一扫 
支付宝扫一扫 
