给 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;

}

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

2、 使用 background-image

使用 background-image 绘制渐变色背景,并且把中间用纯色遮住应该是最容易想到的一种方法。

思路是:使用两个盒子叠加,给下层的盒子设置渐变色背景和 padding,给上层盒子设置纯色背景。

html:

<div>

  <div>

    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*/

}

这种方式的优点是容易理解,兼容性好,缺点是设置 content 的 border-radius 会比较 tricky,且不准确。

3、两层元素、background-image、background-clip

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

html:

<div>

  <div></div>

  <div>

    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);

}

4、 伪元素、方法3的简化

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

HTML:

<div>

  <div>

    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);

}

5、单层元素、background-clip、background-origin、background-image

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

HTML:

<div>

  <div>

    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);

}

目前就能想到这5种方法,个人推荐优先使用方法4和方法5。

最后,感谢您的阅读,如果你觉得我分享的方法有用,请记得给我点个赞。

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

安徽开放大学|安徽开放大学报名,安徽开放大学报考,安徽开放大学,什么是安徽开放大学,安徽开放大学学历,安徽开放大学学费,安徽开放大学报名条件,安徽开放大学报名时间,安徽开放大学学历,安徽开放大学专业
安徽开放大学
一年制中专|中专学历,中专是什么学历,中专是什么,中专有什么专业,中专升大专,一年制中专
一年制中专
大理科技管理学校|大理科技管理学校,大理科技,大理科技中等职业技术学校,大理科技管理中等职业技术学校,大理科技学校
大理科技管理学校
云南网站建设|云南网站制作,网站建设,云南网站开发,云南网站设计,云南网页设计,云南网站建设公司,云南网站建设
云南网站建设
昆明综合高中|昆明综合高中
昆明综合高中
卓越综合高中|卓越综合高中
卓越综合高中
易捷尔单招|易捷尔单招,易捷尔单招培训,易捷尔单招报名,易捷尔单招考试,易捷尔单招培训学校,易捷尔单招分数
易捷尔单招
天麻的功效与作用吃法|天麻的功效与作用,天麻的功效与作用吃法,天麻炖什么治头痛最好,天麻的功效与作用禁忌,天麻多少钱一斤,天麻的功效与作用吃法及禁忌,天麻怎么吃效果最好,天麻粉的功效与作用,天麻怎么吃
天麻的功效与作用吃法

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部