CSS实现渐变色边框(Gradient borders)的5种方法


Posted in HTML / CSS onMarch 25, 2022

给 border 设置渐变色是很常见的效果,实现这个效果有很多思路,今天把我所知道的方法罗列于此供大家参考。

1. 使用border-image

CSS 提供了 border-image 属性用于给 border 绘制复杂图样,与 background-image 类似,我们可以在 border 中展示imagelinear-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-clipbackground-originbackground-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

 到此这篇关于CSS实现渐变色边框(Gradient borders)的5种方法的文章就介绍到这了,更多相关CSS 渐变色边框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
flex弹性布局详解
HTML常用标签超详细整理
Mar 19 #HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 #HTML / CSS
CSS精灵图的原理与使用方法介绍
CSS3实现指纹特效代码
css3应用示例:新增的选择器
Mar 16 #HTML / CSS
You might like
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
PHP中使用curl入门教程
2015/07/02 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
Python 下载及安装详细步骤
2019/11/04 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
毕业生自荐信
2013/12/14 职场文书
大型车展策划方案
2014/02/01 职场文书
出纳员岗位职责
2014/03/13 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
村容村貌整治方案
2014/05/21 职场文书
财务工作失误检讨书
2015/02/19 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers