当前位置: 首页 > news >正文

css实现渐变色border

  • 方式1
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;
}作者:MudOnTire
链接:https://juejin.cn/post/7017701121619656711
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 方式2-5
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=2.0" /><title>Document</title></head><body><!-- 方式2 --><div class="border-box2 border-bg2"><div class="content2">方式2: 使用 background-image绘制渐变色背景,并且把中间用纯色遮住应该是最容易想到的一种方法,思路是:使用两个盒子叠加,给下层的盒子设置渐变色背景和padding,给上层盒子设置纯色背景。</div></div><!-- 方式3 --><div class="border-box3"><div class="border-bg3"></div><div class="content3">为了解决方法 2 中 border-radius不准确的问题,可以使用一个单独的元素作为渐变色背景放在最下层,上层设置一个透明的border 和纯色的背景(需要设置 background-clip: padding-box以避免盖住下层元素的 border), 上下两层设置相同的 border-radius。</div></div><!-- 方式4 --><div class="border-box4"><div class="content4">我们可以使用伪元素替换 div.border-bg 以简化HTML结构。</div></div><!-- 方式5 --><div class="border-box5"><div class="content5">最后是我觉得最优雅的一种方法,只需要用到单层元素,为其分别设置background-clip、background-origin、background-image这三个属性,每个属性设置两组值,第一组用于设置border内的单色背景,第二组用于设置border上的渐变色。</div><style>/*  方式2: */.border-box2 {width: 300px;height: 200px;margin: 25px 0;}.border-bg2 {background: linear-gradient(to right, #9d63e0, #2c62eb);padding: 20px;border-radius: 25px;}.content2 {height: 100%;background-color: #fff;border-radius: 10px; /*trciky part*/}/* 方式3 */.border-box3 {border: 4px solid transparent;border-radius: 16px;position: relative;background-color: rgba(255, 255, 255, 1);background-clip: padding-box; /*important*/}.border-bg3 {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);}/* 方式4 */.border-box4 {border: 4px solid transparent;border-radius: 16px;position: relative;background-color: rgba(255, 255, 255, 1);background-clip: padding-box; /*important*/}.border-box4::after {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);}/* 方式5 */.border-box5{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, #fff, #fff), linear-gradient(90deg, #8F41E9, #578AEF);}</style></body>
</html>

文章参考链接: https://juejin.cn/post/7017701121619656711

相关文章:

css实现渐变色border

方式1 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; }作者&#xff1a;MudOnTire 链接&#xff1a…...

管理 IBM Spectrum LSF

管理 IBM Spectrum LSF 了解如何管理 IBM Spectrum LSF 集群&#xff0c;控制守护程序&#xff0c;更改集群配置以及使用主机和队列。 管理 LSF 作业和作业调度策略。 查看作业信息和控制作业。 了解如何配置资源并将其分配给 LSF 作业。 了解如何在 LSF 集群中提交&#xff0…...

117页数字化转型与产业互联网发展趋势及机会分析报告PPT

导读&#xff1a;原文《》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 喜欢文章&#xff0c;您可以点赞评论转发本文&#xff0c;了解更多内容请私信&#xff1a;方…...

【JavaWeb】实训的长篇笔记(上)

JavaWeb的实训是学校的一门课程&#xff0c;老师先讲解一些基础知识&#xff0c;然后让我们自己开发一个比较简单的Web程序。可涉及的知识何其之多&#xff0c;不是实训课的 3 周时间可以讲得完的&#xff0c;只是快速带过。他说&#xff1a;重点是Web开发的流程。 我的实训草草…...

如何使用Docker安装AWVS?

前言 还记得很早的时候使用AWVS&#xff0c;还需要找位置&#xff0c;贴补丁&#xff0c;放文件&#xff0c;现在慢慢掌握Docker后发现&#xff0c;使用Docker去部署一些东西就很方便&#xff0c;当然也包括AWVS。 我们今天带大家通过Docker部署AWVS&#xff08;有中文哦&…...

vue命名规范

文件和文件夹的命名&#xff1a; 文件夹命名&#xff1a; Vue 项目中通常可以根据功能或页面来划分文件夹。例如&#xff0c;您可以为每个页面创建一个文件夹&#xff0c;并将相关的组件、样式和资源文件放在其中。文件夹的命名最好使用短横线分隔的小写字母&#xff08;kebab …...

第05天 SpringBoot自动配置原理

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a;每天一个知识点 ✨特色专栏&#xff1a…...

AlphaZero能否从围棋和国际象棋飞跃到量子计算?

一项新的研究表明&#xff0c;DeepMind惊人的游戏算法AlphaZero可以帮助释放量子计算的力量和潜力。 自两年多前出现以来&#xff0c;AlphaZero一再证明了其快速学习能力&#xff0c;将自己提升到围棋&#xff0c;国际象棋和将棋&#xff08;日本象棋&#xff09;的特级大师级别…...

进程切换

进程切换 上下文切换上下文切换的消耗上下文切换与模式切换 对于通常的进程而言&#xff0c;其创建、撤销及要求由系统设备完成的IO操作&#xff0c;都是利用系统调用而进入内核&#xff0c;再由内核中的相应处理程序予以才完成的。进程切换同样是在内核的支持下实现的&#xf…...

ES踩坑记录之UNASSIGNED分片无法恢复

问题背景 换节点 我们线上有一套ES集群&#xff0c;三台机器&#xff0c;共运行了6个节点。一直在线上跑了几个月也一直没出什么问题。然而好巧不巧&#xff0c;就在昨天&#xff0c;集群中的3号节点磁盘出现故障&#xff0c;导致机器直接瘫痪。本来大家觉得问题不大&#xf…...

ubuntu更换国内apt源

ubuntu必备操作 1 更换apt镜像源 备份镜像 cp /etc/apt/sources.list /etc/apt/sources.list.bak查看自己ubuntu版本 # 查看自己的codename #查看自己的ubuntu版本[注意关注&#xff1a;DISTRIB_CODENAME&#xff0c;发行代号] cat /etc/*release# DISTRIB_CODENAMEcosmic …...

OpenCV-Python中的图像处理-视频分析

OpenCV-Python中的图像处理-视频分析 视频分析Meanshift算法Camshift算法光流Lucas-Kanade Optical FlowDense Optical Flow 视频分析 学习使用 Meanshift 和 Camshift 算法在视频中找到并跟踪目标对象: Meanshift算法 Meanshift 算法的基本原理是和很简单的。假设我们有一堆…...

STM32 CubeMX (第四步Freertos内存管理和CPU使用率)

STM32 CubeMX STM32 CubeMX &#xff08;第四步Freertos内存管理和CPU使用率&#xff09; STM32 CubeMX一、STM32 CubeMX设置时钟配置HAL时基选择TIM1&#xff08;不要选择滴答定时器&#xff1b;滴答定时器留给OS系统做时基&#xff09;使用STM32 CubeMX 库&#xff0c;配置Fr…...

题解 | #1012.Equalize the Array# 2023杭电暑期多校10

1012.Equalize the Array 签到 题目大意 定义一个数组的 m o d e mode mode 是其中出现次数最多的数字&#xff08;可不唯一&#xff09; 给定一个数组 a a a &#xff0c;每次操作可以选定其一个 m o d e mode mode 并使数组中所有与之相等的元素 1 1 1 问任意次操作后…...

UE4/5C++多线程插件制作(二十一、使用)

目录 DemoPawn.h DemoPawn.cpp 会出现的bug 插件 相关的插件制作在上一节已经完成了。 具体的使用方式在第0章已经写了,get之后去绑定即可。 而后笔者做了一个接口,具体的绑定方式也就在这个接口里面。 接下来最重要的是进行使用,对此我做了一个与蓝图相关的接口,里…...

【C#】关于?的用法

1、可空类型修饰符&#xff08;&#xff1f;&#xff09; 如&#xff1a; int? x null;//可空类型默认值都是null&#xff0c;而值类型如int默认值为0、bool默认值为false等 bool? result true;2、三目运算符&#xff08;?&#xff1a;&#xff09; 如&#xff1a; bool…...

linux——mysql的高可用MHA

目录 一、概述 一、概念 二、组成 三、特点 四、工作原理 二、案例 三、构建MHA 一、基础环境 二、ssh免密登录 三、主从复制 master slave1 四、MHA安装 一、环境 二、安装node 三、安装manager 一、概述 一、概念 MHA&#xff08;MasterHigh Availability&a…...

【学习日记】【FreeRTOS】空闲任务与阻塞延时

写在前面 本文是基于野火 RTOS 教程对空闲任务和阻塞延时的详解。 一、什么是任务中的阻塞延时 说到阻塞延时&#xff0c;笔者的第一反应就是在单片机的 while 循环中&#xff0c;使用一个 for 循环不断递减一个大数&#xff0c;通过 CPU 不断执行一条指令的耗时进行延时。这…...

衣服材质等整理(时常更新)

参考文章&图片来源 https://zhuanlan.zhihu.com/p/390341736 00. 天然纤维 01. 化学纤维 02. 聚酯纤维&#xff08;即&#xff0c;涤纶&#xff09; 一种由有机二元酸和二元醇通过化学缩聚制成的合成纤维。具有出色的抗皱性和保形性&#xff0c;所制衣物在穿着过程中不容…...

电子商务环境下旅游价值链

迈克尔 ・ 波特(Michael E. Porter)在其《竞争优势》一书中提出了“价值链” 的概念&#xff0c;并认为一家企业最核心的竞争优势在于对价值链的设计。虽然迈克尔 ・ 波 特提出的价值链主要是针对企业内部的价值链&#xff0c;但他视价值链为一系列连续完成的 活动&#xff…...

spring源码分析bean的生命周期(下)

doGetBean()执行过程 createBean()执行过程 一、DependsOn注解 spring创建对象之前会判断类上是否加了DependsOn注解&#xff0c;加了会遍历然后会添加到一个map中&#xff0c;spring会先创建DependsOn注解指定的类 二、spring类加载器 在合并BeanDefinition&#xff0c;确定…...

完美解决Github提交PR后报错:File is not gofumpt-ed (gofumpt)

问题阐述 最近在Github上提交PR后&#xff0c;遇到了这么一个问题&#xff1a;golangci-lint运行失败&#xff0c;具体原因是File is not gofumpt-ed (gofumpt)。 名词解释 golangci-lint&#xff1a; golangci-lint 是Go语言社区中常用的代码质量检查工具&#xff0c;它可以…...

pytorch3d成功安装

一、pytorch3d是什么&#xff1f; PyTorch3D的目标是帮助加速深度学习和3D交叉点的研究。3D数据比2D图像更复杂&#xff0c;在从事Mesh R-CNN和C3DPO等项目时&#xff0c;我们遇到了一些挑战&#xff0c;包括3D数据表示、批处理和速度。我们开发了许多有用的算子和抽象&#xf…...

【vue3】同个页面引入多个图表组件实现自适应的方法

首先说明&#xff0c;此方案仅针对vue3项目在同一个页面引入了多个图表组件&#xff0c;因为我发现不能框架不同的引入&#xff0c;resize的写法还不同 window.addEventListener("resize", function() {...// 在此处重新调用即可 }以下是具体写法&#xff1a; 循环…...

一文了解汽车芯片的分类及用途介绍

汽车芯片按其功能可分为控制类&#xff08;MCU和AI芯片&#xff09;、功率类、传感器和其他&#xff08;如存储器&#xff09;四种类型。市场基本被国际巨头所垄断。人们常说的汽车芯片是指汽车里的计算芯片&#xff0c;按集成规模可分为MCU芯片和AI芯片&#xff08;SoC芯片&am…...

Linux0.11内核源码解析-truncate.c

truncate文件只要实现释放指定i节点在设备上占用的所有逻辑块&#xff0c;包括直接块、一次间接块、二次间接块。从而将文件节点对应的文件长度截为0&#xff0c;并释放占用的设备空间。 索引节点的逻辑块连接方式 释放一次间接块 static void free_ind(int dev,int block) {…...

LED驱动型IC芯片的原理介绍

一、LED驱动器是什么 LED驱动器&#xff08;LED Driver&#xff09;&#xff0c;是指驱动LED发光或LED模块组件正常工作的电源调整电子器件。由于LED PN结的导通特性决定&#xff0c;它能适应的电源电压和电流变动范围十分狭窄&#xff0c;稍许偏离就可能无法点亮LED或者发光效…...

VLAN实验

实验题目如下&#xff1a; 实验拓扑如下&#xff1a; 实验要求如下&#xff1a; 【1】PC1/3的接口均为access模式&#xff0c;且属于van2&#xff0c;在同一网段 【2】PC2/4/5/6的IP地址在同一网段&#xff0c;与PC1/3不在同一网段 【3】PC2可以访问4/5/6&#xff0c;PC4不能…...

Qt应用开发(基础篇)——高级纯文本窗口 QPlainTextEdit

一、前言 QPlainTextEdit类继承于QAbstractScrollArea&#xff0c;QAbstractScrollArea继承于QFrame&#xff0c;是Qt用来显示和编辑纯文本的窗口。 滚屏区域基类https://blog.csdn.net/u014491932/article/details/132245486?spm1001.2014.3001.5501框架类QFramehttps://blo…...

三维可视化平台有哪些?Sovit3D可视化平台怎么样?

随着社会经济的发展和数字技术的进步&#xff0c;互联网行业发展迅速。为了适应新时代社会发展的需要&#xff0c;大数据在这个社会经济发展过程中随着技术的进步而显得尤为重要。同时&#xff0c;大数据技术的快速发展进程也推动了可视化技术的飞速发展&#xff0c;国内外各类…...

Xxl-job安装部署以及SpringBoot集成Xxl-job使用

1、安装Xxl-job&#xff1a; 可以使用docker拉取镜像部署和源码编译两种方式&#xff0c;这里选择源码编译安装。 代码拉取地址&#xff1a; https://github.com/xuxueli/xxl-job/tree/2.1.2 官方开发文档&#xff1a; https://www.xuxueli.com/xxl-job/#%E3%80%8A%E5%88%…...

【【超声波避障小车代码】】

超声波避障小车代码 #include <reg51.h> //通用51头文件 #include <intrins.h> //使用了_nop()_函数#define uchar unsigned char //用 uchar 表示 unsigned char 类型 #define uint unsigned int //用 uint 表示 unsigned int 类型sbit EN…...

TDI(Time Delay Integration)

TDI&#xff08;Time Delay Integration&#xff09;是一种特殊的图像采集技术&#xff0c;常用于线阵CCD&#xff08;Charge-Coupled Device&#xff09;相机。TDI技术可以在保持高分辨率的同时增强图像的信噪比&#xff08;Signal-to-Noise Ratio, SNR&#xff09;&#xff0…...

RHCE——一、安装部署及例行性工作

RHCE 一、网络服务1、准备工作2、RHEL9操作系统的安装部署3、配置并优化RHEL9操作系统4、网络配置5、修改网络连接 二、例行性工作1、单一执行的例行性工作2、循环执行的例行性工作 三、书写定时任务的注意事项四、系统级别的计划任务五、实验1、实验一&#xff1a;编写脚本tes…...

服务器数据库中了360后缀勒索病毒怎么办?360后缀勒索病毒的加密形式

随着信息技术的发展&#xff0c;企业的计算机服务器数据库变得越来越重要。然而&#xff0c;在数字时代&#xff0c;网络上的威胁也日益增多。近期&#xff0c;我们收到很多企业的求助&#xff0c;企业的计算机服务器遭到了360后缀勒索病毒的攻击&#xff0c;导致服务器内的所有…...

期权就是股指期货吗,哪个好做一点?

近年来&#xff0c;场内ETF期权产品不断扩大&#xff0c;越来越多的投资者有投资期权的想法。当我们看到期权时&#xff0c;我们会不知不觉地想到期货&#xff0c;虽然期货与期权只有一个字的区别&#xff0c;但实际上有很大的不同&#xff0c;那么期权就是股指期货吗&#xff…...

week32

本周目标&#xff1a; Belady现象的解释 操作系统 计组IO/MM chapter 刷力扣 ubuntu磁盘/网络/命令行进阶*1 tarball之类的使用 Question 大数据系统实验要学吗&#xff1f; 据说课讲得不好这是一门类似数据库的课程——大数据之hadoop / hive / hbase 的区别是什么&a…...

【数据库】P1 数据库基本常识

数据库基本常识 数据库 ≠ 数据库管理系统表&#xff08;Table&#xff09;SQL是什么 数据库 ≠ 数据库管理系统 数据库是保存有组织的数据的容器&#xff0c;数据库称为 DB&#xff08;DataBase&#xff09;&#xff1b;数据库管理系统是创建和操纵数据库的软件&#xff0c;数…...

c语言——计算两个数的乘积

//计算两个数的乘积 #include<stdio.h> #include<stdlib.h> int main() {double firstNumber,secondNumber,product;printf("两个浮点数&#xff1a;");scanf("%lf,%lf",&firstNumber,&secondNumber);productfirstNumber*secondNumber…...

单机模型并行最佳实践

单机模型并行最佳实践 模型并行在分布式训练技术中被广泛使用。 先前的帖子已经解释了如何使用 DataParallel 在多个 GPU 上训练神经网络&#xff1b; 此功能将相同的模型复制到所有 GPU&#xff0c;其中每个 GPU 消耗输入数据的不同分区。 尽管它可以极大地加快训练过程&…...

编程练习(3)

一.选择题 第一题&#xff1a; 函数传参的两个变量都是传的地址&#xff0c;而数组名c本身就是地址&#xff0c;int型变量b需要使用&符号&#xff0c;因此答案为A 第二题&#xff1a; 本题考察const修饰指针变量&#xff0c;答案为A,B,C,D 第三题&#xff1a; 注意int 型变…...

PyTorch学习笔记(十三)——现有网络模型的使用及修改

以分类模型的VGG为例 vgg16_false torchvision.models.vgg16(weightsFalse) vgg16_true torchvision.models.vgg16(weightsTrue) 设置为 False 的情况&#xff0c;相当于网络模型中的参数都是初始化的、默认的设置为 True 时&#xff0c;网络模型中的参数在数据集上是训练好…...

Python爬虫的scrapy的学习(学习于b站尚硅谷)

目录 一、scrapy  1. scrapy的安装  &#xff08;1&#xff09;什么是scrapy  &#xff08;2&#xff09;scrapy的安装 2. scrapy的基本使用  &#xff08;1&#xff09;scrap的使用步骤  &#xff08;2&#xff09;代码的演示 3. scrapy之58同城项目结构和基本方法&…...

“深入解析JVM:揭秘Java虚拟机的工作原理“

标题&#xff1a;深入解析JVM&#xff1a;揭秘Java虚拟机的工作原理 摘要&#xff1a;本文将深入解析Java虚拟机&#xff08;JVM&#xff09;的工作原理&#xff0c;探讨其内部结构和运行机制。我们将介绍JVM的组成部分、类加载过程、内存管理、垃圾回收、即时编译等关键概念&…...

【数据结构与算法】十大经典排序算法-归并排序

&#x1f31f;个人博客&#xff1a;www.hellocode.top &#x1f3f0;Java知识导航&#xff1a;Java-Navigate &#x1f525;CSDN&#xff1a;HelloCode. &#x1f31e;知乎&#xff1a;HelloCode &#x1f334;掘金&#xff1a;HelloCode ⚡如有问题&#xff0c;欢迎指正&#…...

基于深度学习创建-表情符号--附源码

表情符号深度学习概述 如今,我们使用多种表情符号或头像来表达我们的心情或感受。它们充当人类的非语言线索。它们成为情感识别、在线聊天、品牌情感、产品评论等的关键部分。针对表情符号驱动的故事讲述的数据科学研究不断增加。 从图像中检测人类情绪非常流行,这可能是由…...

.netcore grpc的proto文件字段详解

一、.proto文件字段概述 grpc的接口传输参数都是根据.proto文件约定的字段格式进行传输的grpc提供了多种类型字段&#xff1b;主要包括标量值类型&#xff08;基础类型&#xff09;、日期时间、可为null类型、字节、列表、字典、Any类型&#xff08;任意类型&#xff09;、One…...

带你了解建堆的时间复杂度

目录 用向上调整建堆的时间复杂度 1.向上调整建堆的时间复杂度O(N*logN) 2.数学论证 3.相关代码 用向下调整建堆的时间复杂度 1.建堆的时间复杂度为O(N) 2.数学论证 3.相关代码 完结撒花✿✿ヽ(▽)ノ✿✿ 博主建议:面试的时候可能会被面试官问到建堆时间复杂度的证明过…...

人工智能原理(6)

目录 一、机器学习概述 1、学习和机器学习 2、学习系统 3、机器学习发展简史 4、机器学习分类 二、归纳学习 1、归纳学习的基本概念 2、变型空间学习 3、归纳偏置 三、决策树 1、决策树组成 2、决策树的构造算法CLS 3、ID3 4、决策树的偏置 四、基于实例的学习…...

单片机模块化编程文件创建流程

一、在工程文件夹下创建一个新的文件夹&#xff0c;命名为“ModulesCodesFiles”&#xff0c;译为“模块化代码文件”&#xff0c;用于存放所有模块化代码文件。 二、在“ModulesCodesFiles”文件夹下为每个模块创建一个新的文件夹&#xff0c;命名为模块的名称&#xff0c;例…...