WEB开发者-分享WEB开发知识,让开发变得更简单!

利用CSS怎么创建渐变色边框?5种方法分享

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

利用CSS怎么创建渐变色边框?5种方法分享

给 border 设置渐变色是很常见的效果,实现这个效果有很多思路,今天把我所知道的方法罗列于此供大家参考。(学习视频分享:css视频教程)

1. 使用 border-image

CSS 提供了 border-image 属性用于给 border 绘制复杂图样,与 background-image 类似,我们可以在 border 中展示imagelinear-gradient

通过 border-image 设置渐变色 border 是最简单的方法,只需要两行代码:

CSS:

p {
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}

/* 或者 */
p {
  border: 4px solid;
  border-image-source: linear-gradient(to right, #8f41e9, #578aef);
  border-image-slice: 1;
}

Codepen demo

https://codepen.io/mudontire/pen/xxLxeZw

这种方式虽然简单但有个明显的缺陷,不支持设置 border-radius。接下来会介绍几种支持 border-radius 的方法。

2. 使用 background-image

使用 background-image 绘制渐变色背景,并且把中间用纯色遮住应该是最容易想到的一种方法,思路是:使用两个盒子叠加,给下层的盒子设置渐变色背景和 padding,给上层盒子设置纯色背景。

HTML:

<p class="border-box border-bg">
  <p 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.
  </p>
</p>

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-imagebackground-clip

为了解决方法 2 中 border-radius 不准确的问题,可以使用一个单独的元素作为渐变色背景放在最下层,上层设置一个透明的 border 和纯色的背景(需要设置 background-clip: padding-box 以避免盖住下层元素的 border), 上下两层设置相同的 border-radius

HTML:

<p class="border-box">
  <p class='border-bg'></p>
  <p 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.
  </p>
</p>

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的简化

我们可以使用伪元素替换 p.border-bg 以简化HTML结构。

HTML:

<p class="border-box">
  <p 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.
  </p>
</p>

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-clipbackground-originbackground-image

最后是我觉得最优雅的一种方法,只需要用到单层元素,为其分别设置 background-clipbackground-originbackground-image 这三个属性,每个属性设置两组值,第一组用于设置border内的单色背景,第二组用于设置border上的渐变色。

HTML:

<p class="border-box">
  <p 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.
  </p>
</p>

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种方法分享的详细内容,更多请关注web开发者其它相关文章!

本文链接:https://www.webkfz.com/WEBkF/wangyejishu/179990.html

版权声明:站内所有文章皆来自网络转载,只供分享作用,不代表本站的观点!

发表评论 共有 0 条评论)

联系客服
网站客服 业务合作 QQ
1244305267
公众号
公众号
公众号
返回顶部