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背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
flex弹性布局详解
HTML常用标签超详细整理
Mar 19 #HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 #HTML / CSS
CSS精灵图的原理与使用方法介绍
CSS3实现指纹特效代码
css3应用示例:新增的选择器
Mar 16 #HTML / CSS
You might like
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
PyTorch基本数据类型(一)
2019/05/22 Python
python模块常用用法实例详解
2019/10/17 Python
使用Python发现隐藏的wifi
2020/03/04 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
简历的个人自我评价范文
2014/01/03 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
房产委托公证书样本
2014/04/04 职场文书
2015年个人实习工作总结
2014/12/12 职场文书