不要图片？CSS实现圆角边框渐变色+背景透明

news2024/10/6 2:15:22

前言

👏不要图片？CSS实现圆角边框渐变色+背景透明，最近在工作中常常实现这些效果，速速来Get吧~
🥇文末分享源代码。记得点赞+关注+收藏！

1.实现效果

在这里插入图片描述

2.实现原理

border-image：
border-image CSS 属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单，也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉border-style 属性所设置的边框样式。

我们都知道，实现一个边框渐变色可以用border-image，但是border-image不支持圆角；那么如何通过一些方法，去实现边框圆角呢？

在这里插入图片描述

 border-image: linear-gradient( 115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b ) 2 2;

3.实现步骤

方法一：

background-clip ：content-box, border-box
缺点：背景无法透明

background-clip：规定背景的绘制区域

语法：

background-clip: border-box|padding-box|content-box;
值描述
border-box背景被裁剪到边框盒
padding-box背景被裁剪到内边距框
content-box背景被裁剪到内容框

background-origin:
background-Origin属性指定background-position属性应该是相对位置。
注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。

  • 绘制一个标签，为其设置相应的宽高

在这里插入图片描述

<div class="flex-column j_c">background-clip</div>

div {
	cursor: pointer;
	position: relative;
	width: 180px;
	height: 60px;
	font-size: 15px;
	color: #e2fffd;
	transition: all 0.5s ease-in-out;
	position: relative;
}

设置背景颜色为边框颜色+元素背景色，设置background-origin，以及background-clip，并设置透明色边框

div:nth-child(1) {
	--bg: linear-gradient(180deg, #346575 0%, #1a283b 100%);
	--border: linear-gradient(270deg, #455364, #aec9e9, #455364);
	border: 1px solid transparent;
	/* var(--bg)背景色  var(--border)边框色 */
	background-image: var(--bg), var(--border);
	background-origin: border-box;
	background-clip: content-box, border-box;
	border-radius: 10px;
}
  • 该方法不能设置透明色的背景

方法二：

伪元素叠加
缺点：背景无法透明

  • 绘制一个标签，设置背景颜色为边框渐变色的色值，设置相对定位，层级设置为1
<div class="flex-column j_c">伪元素</div>

在这里插入图片描述

div:nth-child(2) {
	z-index: 1;
	width: 180px;
	height: 60px;
	border-radius: 10px;
	background: linear-gradient(270deg, #455364, #aec9e9, #455364);
}
  • 为其添加一个伪元素，宽度设置为100% - 2px（对应为边框的宽高），设置背景色，层级为-1，避免遮挡内容区域

在这里插入图片描述

div:nth-child(2)::after {
	content: "";
	position: absolute;
	/* 设置层级为-1，避免遮挡内容 */
	z-index: -1;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	background: linear-gradient(180deg, #27a6a7 0%, #054146 100%);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 10px;
}
  • 该方法不能设置透明色的背景

方法三：

mask遮罩
可以实现背景透明，能满足使用需求

mask：CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

mask-image：mask-image CSS 属性设置了用作元素蒙版层的图像。默认情况下，这意味着蒙版图像的 alpha 通道将与元素的 alpha 通道相乘，类似于background-image；

mask-clip：CSS属性确定受遮罩影响的区域。元素的绘制内容必须限制在这个区域，类似background-clip；
content-box：绘制的内容被裁剪到内容框中；
padding-box：绘制的内容被裁剪到填充框；

mask-composite：CSS属性表示在当前遮罩层及其下方的遮罩层上使用的合成操作；标准属性下有4种；

mask-composite: add; /* 叠加（默认） */
mask-composite: subtract; /* 减去，排除掉上层的区域 */
mask-composite: intersect; /* 相交，只显示重合的地方 */
mask-composite: exclude; /* 排除，只显示不重合的地方 */

-webkit-mask-composite：非标准：此功能是非标准的，不在标准轨道上。该-webkit-mask-composite属性指定应用于同一元素的多个蒙版图像相互合成的方式。蒙版图像的合成顺序与使用-webkit-mask-image属性声明的顺序相反。

-webkit-mask-composite: clear; /*清除，不显示任何遮罩*/
-webkit-mask-composite: copy; /*只显示上方遮罩，不显示下方遮罩*/
-webkit-mask-composite: source-over; 
-webkit-mask-composite: source-in; /*只显示重合的地方*/
-webkit-mask-composite: source-out; /*只显示上方遮罩，重合的地方不显示*/
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in; /*只显示重合的地方*/
-webkit-mask-composite: destination-out;/*只显示下方遮罩，重合的地方不显示*/
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor; /*只显示不重合的地方*/
  • 定义圆角变量–border-radius，边框宽度–border-width，边框渐变色–border-color
div:nth-child(3){
	--border-radius: 10px;
	--border-width: 1px;
	--border-color: linear-gradient(
	270deg,
	rgba(69, 83, 100, 1),
	rgba(126, 145, 169, 1),
	rgba(69, 83, 100, 1)
	);
}
  • 绘制一个div标签，设置宽高，border-radius为–border-radius，及带有透明度的背景色

在这里插入图片描述

<div class="flex-column j_c">mask</div>

div:nth-child(3){
	width: 200px;
	height: 80px;
	position: relative;
	color: #fff;
	border-radius: var(--border-radius);
	background: rgba(38, 70, 93, 0.2);
	backdrop-filter: blur(10px);
}
  • 添加伪元素，宽高为父元素一致，圆角设置为–border-radius，设置padding为–border-width（即为边框的大小），背景色为–border-color

在这里插入图片描述

 div:nth-child(3)::after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: var(--border-width);
	border-radius: var(--border-radius);
	background: var(--border-color);
 }
  • 伪元素设置mask遮罩,mask-clip，以及mask-composite的合成方式

在这里插入图片描述

/* 随便定义一个颜色 */
--mask-bg: linear-gradient(red, red);
--mask-clip: content-box, padding-box;
-webkit-mask-image: var(--mask-bg), var(--mask-bg);
-webkit-mask-clip: var(--mask-clip);
/* exclude排除，只显示不重合的地方,Firefox支持4个属性 */
mask-composite: exclude;
/* 只显示下方遮罩，重合的地方不显示 */
-webkit-mask-composite: destination-out;
  • 根据上述的方法，通过改变自定义变量，实现不同的圆角边框渐变色并且背景透明

在这里插入图片描述

方法四：

border-image + overflow: hidden
背景可以设置透明，边框内不是圆角，边框宽度和圆角幅度不能设置的随意

  • 绘制一个div标签，设置宽高

在这里插入图片描述

<div class="flex-column j_c">border-image + overflow</div>

div:nth-child(7) {
	width: 200px;
	height: 100px;
	border-radius: 10px;
	box-shadow: 4px 2px 4px 0px rgba(0, 0, 0, 0.2);
}
  • 添加伪元素，设置border-image

在这里插入图片描述

div:nth-child(7):after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 4px solid;
	border-image: linear-gradient(
	115deg,
	#4fcf70,
	#fad648,
	#a767e5,
	#12bcfe,
	#44ce7b
	)
	2 2;
}

为标签设置overflow:hidden,隐藏溢出
在这里插入图片描述

div:nth-child(7) {
	overflow: hidden;
}
  • 边框内不是圆角，边框宽度和圆角幅度不能设置的随意

方法五：

clip-path
背景可以设置透明，边框内不是圆角，边框宽度和圆角幅度不能设置的随意

clip-path：clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

  • 绘制div标签，设置宽高与border-image

在这里插入图片描述

div:nth-child(8) {
	width: 100px;
	height: 100px;
	border: 4px solid;
	border-image: linear-gradient(270deg, #18f77f, #17ffff) 1 1;
}
  • 设置clip-path进行裁剪

在这里插入图片描述

div:nth-child(8) {
   clip-path: inset(0 round 10px);
}
  • 与方法四一致，边框内不是圆角，边框宽度和圆角幅度不能设置的随意

4.实现代码

<style>
section {
 width: 460px;
}
div {
 cursor: pointer;
 position: relative;
 width: 180px;
 height: 60px;
 margin-bottom: 20px;
 margin-right: 20px;
 font-size: 15px;
 color: #e2fffd;
 transition: all 0.5s ease-in-out;
 position: relative;
}
div:hover {
 filter: brightness(1.3);
}
div:nth-child(1) {
 --bg: linear-gradient(180deg, #346575 0%, #1a283b 100%);
 --border: linear-gradient(270deg, #455364, #aec9e9, #455364);
 border: 1px solid transparent;
 /* var(--bg)背景色  var(--border)边框色 */
 background-image: var(--bg), var(--border);
 background-origin: border-box;
 background-clip: content-box, border-box;
 border-radius: 10px;
}
div:nth-child(2) {
 z-index: 1;
 width: 180px;
 height: 60px;
 border-radius: 10px;
 background: linear-gradient(270deg, #455364, #aec9e9, #455364);
}
div:nth-child(2)::after {
 content: "";
 position: absolute;
 /* 设置层级为-1，避免遮挡内容 */
 z-index: -1;
 width: calc(100% - 2px);
 height: calc(100% - 2px);
 background: linear-gradient(180deg, #27a6a7 0%, #054146 100%);
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 border-radius: 10px;
}
div:nth-child(3),
div:nth-child(4),
div:nth-child(5),
div:nth-child(6) {
 --border-radius: 10px;
 --border-width: 1px;
 --border-color: linear-gradient(
   270deg,
   rgba(69, 83, 100, 1),
   rgba(126, 145, 169, 1),
   rgba(69, 83, 100, 1)
 );
 width: 200px;
 height: 80px;
 position: relative;
 color: #fff;
 border-radius: var(--border-radius);
 background: rgba(38, 70, 93, 0.2);
 backdrop-filter: blur(10px);
}
div:nth-child(3)::after,
div:nth-child(4)::after,
div:nth-child(5)::after,
div:nth-child(6)::after {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 padding: var(--border-width);
 border-radius: var(--border-radius);
 background: var(--border-color);
 /* 随便定义一个颜色 */
 --mask-bg: linear-gradient(red, red);
 /* 类似background-clip */
 --mask-clip: content-box, padding-box;
 /* mask允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域 */
 /* mask-image类似background-image 设置了用作元素蒙版层的图像，默认值为none，值为透明图片，或透明渐变 */
 -webkit-mask-image: var(--mask-bg), var(--mask-bg);
 /* 默认值为border-box，可选值与background-origin相同 */
 -webkit-mask-clip: var(--mask-clip);
 /* exclude排除，只显示不重合的地方,Firefox支持4个属性 */
 mask-composite: exclude;
 /* 只显示下方遮罩，重合的地方不显示 */
 -webkit-mask-composite: destination-out;
}
div:nth-child(4) {
 --border-color: linear-gradient(
   180deg,
   rgba(44, 135, 124, 1),
   rgba(95, 250, 255, 1),
   rgba(63, 166, 156, 1)
 );
 background: transparent;
 box-shadow: -4px 2px 4px 0px rgba(0, 0, 0, 0.2),
   inset 0px 0px 12px 0px rgba(92, 242, 246, 0.61);
}
div:nth-child(5) {
 --border-width: 3px;
 --border-radius: 50%;
 --border-color: linear-gradient(180deg, #18f77f, #17ffff);
 background: transparent;
 width: 100px;
 height: 100px;
}
div:nth-child(6) {
 --border-width: 2px;
 --border-radius: 100px 0 0 100px;
 --border-color: linear-gradient(
   180deg,
   rgba(151, 151, 151, 0.3),
   rgba(131, 150, 162, 1),
   rgba(151, 151, 151, 0.3)
 );
 width: 180px;
 height: 100px;
 background: rgba(20, 97, 125, 0.06);
 box-shadow: 4px 2px 4px 0px rgba(0, 0, 0, 0.2);
 backdrop-filter: blur(4px);
}

div:nth-child(7) {
 width: 200px;
 height: 100px;
 border-radius: 10px;
 box-shadow: 4px 2px 4px 0px rgba(0, 0, 0, 0.2);
 overflow: hidden;
}
div:nth-child(7):after {
 content: "";
 position: absolute;
 width: 100%;
 height: 100%;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 border: 4px solid;
 border-image: linear-gradient(
     115deg,
     #4fcf70,
     #fad648,
     #a767e5,
     #12bcfe,
     #44ce7b
   )
   2 2;
}
div:nth-child(8) {
 width: 100px;
 height: 100px;
 border: 4px solid;
 border-image: linear-gradient(270deg, #18f77f, #17ffff) 1 1;
 clip-path: inset(0 round 10px);
}
</style>

<body>
<section class="flex-wrap">
 <!-- 方法一：background-clip ：content-box, border-box，背景无法透明-->
 <div class="flex-column j_c">background-clip</div>
 <!-- 方法二：伪元素叠加，背景无法透明 -->
 <div class="flex-column j_c">伪元素</div>
 <!-- 方法三 :mask遮罩 背景色带透明 -->
 <div class="flex-column j_c">mask</div>
 <!-- mask遮罩 背景透明 -->
 <div class="flex-column j_c">背景透明</div>
 <!-- mask遮罩 背景透明 -->
 <div class="flex-column j_c">透明圆角</div>
 <div class="flex-column j_c">半圆</div>
 <!-- 方法四： border-image + overflow: hidden 边框内不是圆角 -->
 <div class="flex-column j_c">border-image + overflow</div>
 <!-- 方法五：clip-path  边框内不是圆角-->
 <div class="flex-column j_c">clip-path</div>
</section>
</body>

5.写在最后🍒

看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕
更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~

参考链接

巧妙实现带圆角的渐变边框
CSS 实现优惠券的技巧-关于mask遮罩部分

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/606688.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

python基本操作3（速通版）

python基本操作3（速通版）

目录 一、字典 1.字典定义 2.字典的访问 3.字典的遍历 4.字典删除 5.字典练习 6.有序字典 7.集合 8.类型转化问题 9.公共方法 二、列表推导式 1.基本操作 2.在循环中使用if 三、组包和拆包 1.组包拆包基本应用 2.拆包的字典问题 四、python函数的一些特性 1.函…
阅读更多...
【5.31 代随_43day】 最后一块石头的重量 II、目标和、一和零

【5.31 代随_43day】 最后一块石头的重量 II、目标和、一和零

最后一块石头的重量 II、目标和、一和零 最后一块石头的重量 II1.方法图解步骤![在这里插入图片描述](https://img-blog.csdnimg.cn/d2266317bc43491fb261f6372c2e0c9d.jpeg)代码 目标和1.方法图解步骤代码 一和零图解步骤代码 最后一块石头的重量 II 力扣连接&#xff1a;104…
阅读更多...
状态机编程应用(收放卷停车方式控制)

状态机编程应用(收放卷停车方式控制)

有关状态机的详细介绍请参看下面的文章博客： PLC面向对象编程系列之有限状态机(FSM)详解_codesys 状态机_RXXW_Dor的博客-CSDN博客编写PLC控制机器动作类程序时，当分支比较少的时候我们使用if else语句解决，当分支比较多的时候，我们要使用CASE，END_CASE语句解决，针对分支…
阅读更多...
微信小程序个人心得

微信小程序个人心得

首先从官方文档给的框架说起,微信小程序官方文档给出了app.js, app.json, app.wxss. 先从这三个文件说起. 复制 app.js 这个文件是整个小程序的入口文件,开发者的逻辑代码在这里面实现,同时在这个文件夹里面可以定义全局变量.app.json 这个文件可以对小程序进行全局配置,决定…
阅读更多...
【6.01 代随_44day】 完全背包、零钱兑换 II、组合总和 Ⅳ

【6.01 代随_44day】 完全背包、零钱兑换 II、组合总和 Ⅳ

完全背包、零钱兑换 II、组合总和 Ⅳ 完全背包1.方法图解步骤 零钱兑换 II1.方法图解步骤代码 组合总和 Ⅳ图解步骤代码 完全背包 讲解连接&#xff1a;完全背包 1.方法 首先再回顾一下01背包的核心代码 for(int i 0; i < weight.size(); i) { // 遍历物品for(int j b…
阅读更多...
javaScript蓝桥杯---分阵营，比高低

javaScript蓝桥杯---分阵营，比高低

目录 一、介绍二、准备三、目标四、代码五、答案 一、介绍 期末考试结束不久&#xff0c;辛勤的园丁们就将所有学生的考试成绩汇总完毕。不过现在遇到一个问题&#xff0c;那就是目前所有学生的考试数据均混杂在一起。这些数据结构如下&#xff1a; [{name: "潇然"…
阅读更多...
安装Pygame库：在Python中创建游戏的第一步

安装Pygame库：在Python中创建游戏的第一步

&#x1f331;博客主页&#xff1a;大寄一场. &#x1f618;博客制作不易欢迎各位&#x1f44d;点赞⭐收藏➕关注 目录 前言 安装Pygame库 方法一、在pycharm内部直接安装 方法二、通过pip直接安装 验证安装 前言 Pygame是一个功能强大的Python游戏开发库&#xff0c;它提…
阅读更多...
MCU器件选型---主流厂商

MCU器件选型---主流厂商

MCU(Micro Controller Unit)中文名称为微控制单元&#xff0c;又称单片微型计算机(Single Chip Microcomputer)&#xff0c;是指随着大规模集成电路的出现及其发展&#xff0c;将计算机的CPU、RAM、ROM、定时数器和多种I/O接口集成在一片芯片上&#xff0c;形成芯片级的计算机&…
阅读更多...
SSRF漏洞、SQL注入、CSRF漏洞、XXE漏洞

SSRF漏洞、SQL注入、CSRF漏洞、XXE漏洞

SSRF漏洞 1.我理解的定义&#xff1a; 攻击者将伪造的服务器请求发给一个用户&#xff0c;用户接受后&#xff0c;攻击者利用该安全漏洞获得该用户的相关信息 2.原理&#xff1a; 3.场景&#xff1a; &#xff08;1&#xff09;分享 &#xff08;2&#xff09;转码 &#xff…
阅读更多...
网络编程知识点总结（4）

网络编程知识点总结（4）

sock服务端代码实现读写 前几章有具体介绍这几个函数&#xff0c;这里就简单罗列出来了 &#xff08;1&#xff09;socket()函数 int socket(int domain, int type, int protocol); &#xff08;2&#xff09;bind()函数: IP号端口号与相应描述字赋值函数 int bind(int soc…
阅读更多...
shell编程之for循环

shell编程之for循环

文章目录 shell编程之for循环一.for语句1.什么是for循环2.for语句的结构3.for语句中常用转义字符 二.for语句应用示例1.批量添加用户2.根据IP地址检查主机状态三.循环的次数1.循环次数的格式2.循环次数示例2.1求1-100的整数求和2.2 1-10的偶数求和 3.步长——seq3.1 1-10的偶的…
阅读更多...
JavaScript对象详解（六）

JavaScript对象详解（六）

JavaScript对象详解 1、对象的使用1.1、使用对象字面量法1.2、使用构造函数1.3、使用 Object.create() 2、继承与原型链2.1、基于原型链的继承2.1.1、继承属性2.1.2、继承方法 2.2、不同方式所生成的原型链2.2.1、使用语法结构2.2.2、使用构造器2.2.3、使用Object.create()2.2.…
阅读更多...
【锂离子电池容量估算】电池单元总容量的递归近似加权总最小二乘估计（Matlab代码实现）

【锂离子电池容量估算】电池单元总容量的递归近似加权总最小二乘估计（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
论文笔记--Deep contextualized word representations

论文笔记--Deep contextualized word representations

论文笔记--Deep contextualized word representations 1. 文章简介2. 文章概括3 文章重点技术3.1 BiLM(Bidirectional Language Model)3.2 ELMo3.3 将ELMo用于NLP监督任务 4. 文章亮点5. 原文传送门 1. 文章简介 标题&#xff1a;Deep contextualized word representations作者…
阅读更多...
MMPose（openmmlab AI实战营二期第一节）

MMPose（openmmlab AI实战营二期第一节）

链接&#xff1a;人体关键点检测与MMPose_哔哩哔哩_bilibili 赶了个进度&#xff0c;实际上没听到&#xff0c;一个方向被浓缩成50分钟是有点难度。后续有需要再回顾吧 人体姿态估计&#xff1a;识别人体关键点坐标。模式识别任务&#xff0c;难点是始终在变化。以关键点连线…
阅读更多...
chatgpt赋能python：如何使用Python匹配IP地址

chatgpt赋能python：如何使用Python匹配IP地址

如何使用Python匹配IP地址 如果你是一位网络管理员或是网络安全专家&#xff0c;那么你很可能需要经常处理IP地址。在一些情况下&#xff0c;你需要使用Python来自动化匹配或验证IP地址。在本文中&#xff0c;我们将介绍如何使用Python匹配IP地址。 IP地址的基础知识 在介绍…
阅读更多...
地震segy数据高效读写库cigsegy在windows系统的编译

地震segy数据高效读写库cigsegy在windows系统的编译

https://github.com/JintaoLee-Roger/cigsegy 一个读写 segy 格式地震数据的 python 和 c 工具。可以将 segy 格式文件读到内存或者直接转为二进制文件&#xff0c;也可以将一个 numpy 数据存储为segy格式的文件。 特点: 快&#xff0c;底层使用c实现可以在python中使用&…
阅读更多...
皮卡丘XXE/URL重定向/SSRF

皮卡丘XXE/URL重定向/SSRF

一.XXE 1.概述 XXE -"xml external entity injection" 既"xml外部实体注入漏洞"。 概括一下就是"攻击者通过向服务器注入指定的xml实体内容,从而让服务器按照指定的配置进行执行,导致问题" 也就是说服务端接收和解析了来自用户端的xml数据,而又…
阅读更多...
chatgpt赋能python：Python升级所有包：一步引导所有Python开发者升级你的Python环境

chatgpt赋能python：Python升级所有包：一步引导所有Python开发者升级你的Python环境

Python升级所有包&#xff1a;一步引导所有Python开发者升级你的Python环境 Python作为一种动态的编程语言&#xff0c;一直在不断发展和更新。每个Python版本都有自己的新功能和改进。因此&#xff0c;许多Python开发者在使用Python时都会尝试升级到最新的版本。但是&#xf…
阅读更多...
论文笔记--Transformer-XL: Attentive Language Models Beyond a Fixed-Length Context

论文笔记--Transformer-XL: Attentive Language Models Beyond a Fixed-Length Context

论文笔记--Transformer-XL: Attentive Language Models Beyond a Fixed-Length Context 1. 文章简介2. 文章概括3 文章重点技术3.1 Segment-Level Recurrence with State Reuse3.2 相对位置编码 4. 文章亮点5. 原文传送门 1. 文章简介 标题&#xff1a;Transformer-XL: Attent…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023