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

给你的边框加点渐变

news 2026/1/20 11:31:43

目录

    • 前言
    • border-image
    • border-image
    • 实现
    • background+父子div
    • backgorund+一个div+一个伪元素
    • background-clip

🧨🧨🧨

大家好，我是搞前端的半夏 🧑，一个热爱写文的前端工程师 💻.
如果喜欢我的文章，可以关注 ➕ 点赞 👍 一起学习交流前端，成为更优秀的工程师～ 更多故事—点我探索新世界！

🧨🧨🧨

前言

总有人觉得CSS就是一个布局的工具，忽视了CSS的重点，CSS的全称是啥？层叠样式表（Cascading Style Sheets）第二个词是啥，样式样式样式！总有人把CSS的强大忽略了。同样的效果，不同的实现方式，总会有好有坏，但是就怕你一种也不会！本文主要通过一个边框的实现方式来学习不同的属性。

border-image

我之前写过一篇文章来专门来介绍这个属性。《24张图攻克border-image 》这里再简单的介绍一下。

border-image

首先这个属性是下面个属性的缩写，

border-image-source 指定资源

border-image-slice规定图片剪裁位置

border-image-width指定宽度

border-image-outset 指定在边框外部绘制 区域 的量

border-image-repeat 这个是和background-repeat基本差不多*

实现

border-image-source不仅可以接受图片，还可以接受渐变。

注意：这种实现方式有一个缺点就是， border-radius:是无法生效的。所以圆角渐变边框,只能say bye!

这里将整个div分割，然后使用streach拉伸整个border-image.

     .border-image {width: 200px;height: 100px;border: 2px solid;border-image-source: linear-gradient(45deg, #56ECC7, #9f5ad8);border-image-slice: 1;border-image-repeat: stretch;}

image-20211108232240601

background+父子div

<div class="container"><div class="box"></div>
</div>

    <style>.container {background: linear-gradient(45deg,#56ECC7 0%, #6067f3 100%);padding: 1px;width: 200px;height: 100px;border-radius: 4px;}.box {background: #fff;border-radius: 4px;width: 100%;height: 100%;}</style></head><body><div class="container"><div class="box"></div></div>

image-20211108232246825

backgorund+一个div+一个伪元素

看到上一个例子，可能有人此时会想到既然可以使用两个div，那为何不使用一个div加上:after呢？当然是可以的

image-20211108232725786

注意：这里的伪元素充当的是上面父div的角色，可能有人非不信，一定要把渐变加在container上，然后为元素设置白色。你有没有考虑容器有内容的情况。

 .container::after {content: "";z-index: -1;background: linear-gradient(45deg,#56ECC7 0%, #6067f3 100%);
}<div class="container">渐变边框</div>

background-clip

这个属性不多介绍了，请看之前的文章：http://sylblog.xin/archives/38

background-clip: content-box；背景被裁剪至内容区（content box）外沿.

background-clip: border-box；背景延伸至边框外沿（但是在边框下层）.

我们这里设置两个渐变，一个全白的渐变，使用background-clip: content-box让他覆盖内容区域。然后使用background-clip: border-box；将 linear-gradient(45deg, #56ecc7, #6067f3);放到border上面。这样是为啥要设置 background-origin: border-box;

   .container {border: solid 1px transparent;border-radius: 5px;background-image: linear-gradient(#fff, #fff),linear-gradient(45deg, #56ecc7, #6067f3);background-origin: border-box;background-clip: content-box, border-box;text-align: center;line-height: 80px;}

相关文章：

给你的边框加点渐变

目录前言border-imageborder-image实现background父子divbackgorund一个div一个伪元素background-clip&#x1f9e8;&#x1f9e8;&#x1f9e8; 大家好&#xff0c;我是搞前端的半夏 &#x1f9d1;&#xff0c;一个热爱写文的前端工程师 &#x1f4bb;. 如果喜欢我的文章&…...

编程日记 2023/5/12 2:55:37

【目标检测】如何使用Yolov8

如何使用Yolov8一、前言二、用法2.1 安装2.2 使用方法2.3 模型2.3.1 目标检测2.3.2 实例分割2.3.3 分类一、前言 一种易于使用的新的对象检测模型。 由 Ultralytics 开发的 Ultralytics YOLOv8 是一种尖端的、最先进的 (SOTA) 模型&#xff1a; https://github.com/ultralyt…...

编程日记 2023/5/23 17:00:24

NVM安装、配置环境、简单使用

nvm 是Node.js 的版本管理工具&#xff0c;可以在同一台电脑上安装多个Node.js版本灵活切换。 安装# sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash 其中0.39.0可以替换为当前最新的版本号。 配置环境变量# cd ~touch .bash_profile…...

编程日记 2023/5/15 21:47:22

【SPSS】数据预处理基础教程（附案例实战）

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…...

编程日记 2023/5/12 9:37:54

某饿了么APP最新版逆向分析（二）：加密参数初探

二、分析加密参数 说做就做&#xff0c;这边用的python进行模拟请求 万事俱备只欠东风&#xff0c;点击run 发现报错了 怎么回事&#xff1f; 明明请求的内容和抓包的内容完全一致 怎么没有返回我们想要的数据 报错内容为参数错误 因此我就想可能是请求体有参数加密 我…...

编程日记 2023/5/12 2:56:57

程序的编译与链接（预处理详解）+百度面试笔试题+《高质量C/C++编程指南》笔试题

本篇重点介绍程序的编译与链接过程中的预处理阶段&#xff0c;将详细的介绍在预处理阶段会发生什么&#xff0c;以及讲解有关百度该内容的面试笔试题和源于《高质量C/C编程指南》的笔试题。一.【预处理详解】①预定义符号②#define2.1 #define 定义标识符注意&#xff1a;2.2 #…...

编程日记 2023/5/14 8:01:39

全解析 ESM 模块语法，出去还是进来都由你说了算

模块语法是ES6的一个重要特性&#xff0c;它的出现让JavaScript的模块化编程成为了可能。 在JavaScript中可以直接使用import和export关键字来导入和导出模块&#xff0c;但是这种语法并不是ES6的标准&#xff0c;而是ESM&#xff08;ECMAScript Module&#xff09;模块语法的…...

编程日记 2023/4/15 2:49:16

MATLAB 粒子群算法

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…...

编程日记 2023/5/24 21:55:42

java微信小程序音乐播放器分享系统

随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,音乐播放器小程序被用户普遍使用,为方便用户能够可以随时进行音乐播放器小程序的数据信息管理,特开发了基于音乐播放器小程序…...

编程日记 2023/5/27 14:53:46

VS各版本VC各版本对应关系

Visual Studio 经过多年的发展&#xff0c;有许多版本&#xff0c;经常我们在拿到一份代码时不知道对应的VS版本 这时候可以打开工程目录下的vcproj/vcxproj文件&#xff0c;如下所示 <?xml version"1.0" encoding"utf-8"?> <Project DefaultT…...

编程日记 2023/5/23 2:36:15

如何处理“WLAN没有有效的IP配置”这一问题？

&#x1f680;write in front&#x1f680; &#x1f4dc;所属专栏&#xff1a;暂无 &#x1f6f0;️博客主页&#xff1a;睿睿的博客主页 &#x1f6f0;️代码仓库&#xff1a;&#x1f389;VS2022_C语言仓库 &#x1f3a1;您的点赞、关注、收藏、评论&#xff0c;是对我最大的…...

编程日记 2023/5/17 2:10:01

ElasticSearch-学习笔记05【SpringDataElasticSearch】

Java后端-学习路线-笔记汇总表【黑马程序员】ElasticSearch-学习笔记01【ElasticSearch基本介绍】【day01】ElasticSearch-学习笔记02【ElasticSearch索引库维护】ElasticSearch-学习笔记03【ElasticSearch集群】ElasticSearch-学习笔记04【Java客户端操作索引库】【day02】Ela…...

编程日记 2023/5/12 2:59:55

【GlobalMapper精品教程】045：空间操作(2)——相交(Intersect)

GlobalMapper提供的空间分析（操作）的方法有：交集、并集、单并集、差异、对称差集、相交、重叠、接触、包含、等于、内部、分离等，本文主要讲述相交工具的使用。 文章目录 一、实验数据二、符号化设置三、相交运算四、结果展示五、心灵感悟一、实验数据 加载配套实验数据（…...

编程日记 2023/5/16 17:08:22

Android 一体机研发之修改系统设置————自动锁屏

Android 一体机研发之修改系统设置————屏幕亮度 Android 一体机研发之修改系统设置————声音 Android 一体机研发之修改系统设置————自动锁屏 修改系统设置系列篇章马上开张了&#xff01; 本章将为大家细节讲解自动锁屏。 自动锁屏功能&#xff0c;这个可以根据…...

编程日记 2023/5/17 2:11:57

七天实现一个go rpc框架

目录rpc协议目的关于RPC和框架服务端与消息编码确保接口的实现消息的序列化与反序列化通信过程服务端的实现main 函数支持并发与异步的客户端Call 的设计实现客户端服务注册(service register)通过反射实现 service集成到服务端超时处理创建连接超时Client.Call 超时服务端处理…...

编程日记 2023/5/30 11:02:34

EMQX Cloud Serverless 正式上线：三秒部署、按量计费的 MQTT Serverless 云服务

近日&#xff0c;全球领先的开源物联网数据基础设施软件供应商 EMQ 正式发布了 MQTT Serverless 云服务 —— EMQX Cloud Serverless 的 Beta 版本&#xff0c;开创性地采用弹性多租户技术&#xff0c;用户无需关心服务器基础设施和服务规格伸缩所需资源&#xff0c;仅用三秒即…...

编程日记 2023/5/30 11:03:41

快速排序 容易理解的版本

package huaweiod.排序算法;import java.util.Arrays;public class 快速排序 {public static void main(String[] args) {int[] arr {9,8,3,5,6,7,8,9};mysort(arr, 0, arr.length - 1); // myprint(arr," ");}private static void myprint(int[] arr, Strin…...

编程日记 2023/5/27 14:54:59

Linux体系结构

Linux体系结构一、引入概念二、内核三、管理1、内存管理2、进程管理3、进程调度控制进程对CPU的访问4、设备驱动程序和网络接口四、Linux Shell五、磁盘分区硬盘内的分区Linux下磁盘分区和目录的关系一、引入 操作系统的本质是什么&#xff1f; 是一种管理(协调)资源机制&…...

编程日记 2023/5/25 16:43:13

【汽车电子】什么是ADAS？

文章目录ADAS——先进驾驶辅助系统ADAS——商用车安全性能提升的利器总结ADAS——先进驾驶辅助系统 ADAS&#xff0c;全称Advanced Driver Assistance Systems &#xff0c;“先进驾驶辅助系统”&#xff0c;adas是汽车上面的一种系统&#xff0c;中文名叫做高级驾驶辅助系统&…...

编程日记 2023/5/24 2:32:56

java: 错误: 不支持发行版本 5（快速解决办法）

目录 前言 一、出现报错 二、报错的原因 三、解决办法 四、解决成功 前言 在maven web项目上面要部署运行tomcat时候&#xff0c;会出现这个问题 一、出现报错 java: 错误: 不支持发行版本 5 二、报错的原因 &#xff08;1&#xff09;官方解释&#xff1a;这个错误…...

编程日记 2023/4/17 22:26:15

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2026/1/19 23:48:24

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/15 7:06:11

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/12/3 10:52:37

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2026/1/15 9:32:34

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2026/1/15 5:26:23

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

编程新知 2026/1/16 19:43:56

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

编程新知 2025/11/6 1:34:07

电脑定时关机工具推荐

软件介绍 本文介绍一款轻量级的电脑自动关机工具&#xff0c;无需安装&#xff0c;使用简单&#xff0c;可满足定时关机需求。 工具简介 这款关机助手是一款无需安装的小型软件&#xff0c;文件体积仅60KB&#xff0c;下载后可直接运行&#xff0c;无需复杂配置。 使用…...

编程新知 2026/1/20 7:44:54

Razor编程中@Helper的用法大全

文章目录 第一章&#xff1a;Helper基础概念1.1 Helper的定义与作用1.2 Helper的基本语法结构1.3 Helper与HtmlHelper的区别 第二章&#xff1a;基础Helper用法2.1 无参数Helper2.2 带简单参数的Helper2.3 带默认值的参数2.4 使用模型作为参数 第三章&#xff1a;高级Helper用法…...

编程新知 2026/1/15 5:10:12

mysql-MySQL体系结构和存储引擎

1. MySQL体系结构和存储引擎 MySQL被设计成一个单进程多线程架构的数据库&#xff0c;MySQL数据库实例在系统上的表现就是一个进 程当启动实例时&#xff0c;读取配置文件&#xff0c;根据配置文件的参数来启动数据库实例&#xff1b;若没有&#xff0c;按编译时的默认 参数设…...

编程新知 2026/1/15 5:20:47