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实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 HTML / CSS
css弧边选项卡的项目实践
May 07 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
flex弹性布局详解
HTML常用标签超详细整理
Mar 19 #HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 #HTML / CSS
CSS精灵图的原理与使用方法介绍
CSS3实现指纹特效代码
css3应用示例:新增的选择器
Mar 16 #HTML / CSS
You might like
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
python聊天程序实例代码分享
2013/11/18 Python
python中redis的安装和使用
2016/12/04 Python
python导入时小括号大作用
2017/01/10 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
在pycharm中实现删除bookmark
2020/02/14 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
Python图像读写方法对比
2020/11/16 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
办公室副主任岗位职责
2013/11/25 职场文书
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
高中班主任评语大全
2014/04/25 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
运动员代表致辞
2015/07/29 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
MySQL一些常用高级SQL语句
2021/07/03 MySQL