web前端|css教程
CSS,渐变边框
web前端-css教程
利用CSS怎么创建渐变色边框？下面本篇文章给大家分享CSS实现渐变色边框的5种方法，希望对大家有所帮助！
软件管理网站源码下载,ubuntu搜索软件源,wex5使用tomcat,node https爬虫,php新手求职,seo3属于极性还是非极性lzw
.net仓储管理系统源码下载,ubuntu安全加固脚本,tomcat太难配了怎么办,美团网站爬虫,php一维数组重复计数,兴宁seo托管lzw
给 border 设置渐变色是很常见的效果，实现这个效果有很多思路，今天把我所知道的方法罗列于此供大家参考。（学习视频分享：css视频教学、web前端）
搜索引擎 源码 php,ubuntu如何回到桌面,tomcat上传报表报错,爬虫数据收集网站,php获取不到参数怎么办,seo 主管简历lzw
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;}
这种方式虽然简单但有个明显的缺陷，不支持设置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*/}
这种方式的优点是容易理解，兼容性好，缺点是设置 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);}
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);}
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);}
目前就能想到这5种方法，个人推荐优先使用4和5，如果有其他更好的方法，欢迎大家补充。
编程入门！！
