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制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 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程序员工具
2008/05/26 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
php创建类并调用的实例方法
2019/09/25 PHP
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
vue-router单页面路由
2017/06/17 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python版微信红包分配算法
2015/05/04 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
python实现粒子群算法
2020/10/15 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
python 装饰器的基本使用
2021/01/13 Python
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
职专应届生求职信
2013/11/16 职场文书
法学专业自我鉴定
2014/02/05 职场文书
材料员岗位职责
2015/02/10 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL