CSS渐变色边框有多少实现方式 代码是什么
|
在这篇文章中，我们来学习一下“CSS渐变色边框有多少实现方法，代码是什么”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。 给 border 设置渐变色是很常见的效果，实现这个效果有很多思路，今天把我所知道的方法罗列于此供大家参考。 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 demo 这种方式虽然简单但有个明显的缺陷，不支持设置 border-radius。接下来会介绍几种支持 border-radius 的方法。 2. 使用 background-image 使用 background-image 绘制渐变色背景，并且把中间用纯色遮住应该是最容易想到的一种方法，思路是：使用两个盒子叠加，给下层的盒子设置渐变色背景和 padding，给上层盒子设置纯色背景。 HTML: <div class="border-box border-bg"> <div class="content"> 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. </div> </div> 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 这种方式的优点是容易理解，兼容性好，缺点是设置 content 的 border-radius 会比较 tricky，且不准确。 3. 两层元素、background-image、background-clip 为了解决方法 2 中 border-radius 不准确的问题，可以使用一个单独的元素作为渐变色背景放在最下层，上层设置一个透明的 border 和纯色的背景（需要设置 background-clip: padding-box 以避免盖住下层元素的 border）, 上下两层设置相同的 border-radius。 HTML: <div class="border-box"> <div class='border-bg'></div> <div class="content"> 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. </div> </div> 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 4. 伪元素、方法3的简化 我们可以使用伪元素替换 div.border-bg 以简化HTML结构。 HTML: <div class="border-box"> <div class="content"> 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. </div> </div> 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 5. 单层元素、background-clip、background-origin、background-image 最后是我觉得最优雅的一种方法，只需要用到单层元素，为其分别设置 background-clip、background-origin、background-image 这三个属性，每个属性设置两组值，第一组用于设置border内的单色背景，第二组用于设置border上的渐变色。 HTML: <div class="border-box"> <div class="content"> 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. </div> </div> 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 目前就能想到这5种方法，个人推荐优先使用4和5。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
