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

给你的边框加点渐变

news 2026/2/9 2:58:04

目录

    • 前言
    • 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

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2026/1/29 2:11:35

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2026/2/8 21:57:46

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2026/1/31 11:18:29

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2026/2/3 19:38:38

React从基础入门到高级实战：React 实战项目 - 项目五：微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...

编程新知 2025/10/18 20:50:06

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...

编程新知 2026/2/6 5:51:39

医疗AI模型可解释性编程研究：基于SHAP、LIME与Anchor

1 医疗树模型与可解释人工智能基础 医疗领域的人工智能应用正迅速从理论研究转向临床实践，在这一过程中，模型可解释性已成为确保AI系统被医疗专业人员接受和信任的关键因素。基于树模型的集成算法（如RandomForest、XGBoost、LightGBM）因其卓越的预测性能和相对良好的解释性…...

编程新知 2026/1/23 11:47:13

基于stm32F10x 系列微控制器的智能电子琴（附完整项目源码、详细接线及讲解视频）

注&#xff1a;文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件&#xff1a;STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …...

编程新知 2026/1/26 9:04:42

java+webstock

maven依赖 <dependency><groupId>org.java-websocket</groupId><artifactId>Java-WebSocket</artifactId><version>1.3.5</version></dependency><dependency><groupId>org.apache.tomcat.websocket</groupId&…...

编程新知 2026/1/11 8:01:58