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

给你的边框加点渐变

news 2026/5/12 15:26:27

目录

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

如何快速掌握91160-cli：面向新手的医院全自动挂号完整指南

如何快速掌握91160-cli&#xff1a;面向新手的医院全自动挂号完整指南 【免费下载链接】91160-cli 健康160全自动挂号脚本&#xff0c;捡漏神器 项目地址: https://gitcode.com/gh_mirrors/91/91160-cli 还在为医院挂号难而烦恼吗&#xff1f;91160-cli是一款专为医疗预…...

编程新知 2026/5/12 15:20:43

Jupyter Notebook插件库装完不显示？手把手教你搞定jupyter_contrib_nbextensions和configurator的正确安装顺序

Jupyter Notebook插件安装全指南&#xff1a;从原理到实战排查 第一次打开Jupyter Notebook的插件管理器&#xff0c;却发现里面空空如也——这种挫败感我太熟悉了。去年刚开始用Jupyter做数据分析时&#xff0c;我花了整整一个下午才搞明白为什么安装的插件就是不显示。后来才…...

编程新知 2026/5/12 15:13:53

一次搞清楚：Agent、Skill、Prompt、MCP

文章深入探讨了AI Agent在落地过程中面临的三大核心痛点&#xff1a;Prompt的临时性与不可复用性、Agent专业能力的难以沉淀与迁移、以及AI能力无法融入现有工程化流程。文章提出Agent Skills作为AI Agent的专业能力说明书&#xff0c;通过标准化能力描述与执行框架&#xff0c…...

编程新知 2026/5/12 14:07:30

WarcraftHelper 2024：魔兽争霸3终极优化指南

WarcraftHelper 2024&#xff1a;魔兽争霸3终极优化指南 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为《魔兽争霸3》在现代电脑上运行卡顿、画…...

编程新知 2026/5/12 11:11:56

从龟速到极速：如何用trackerslist项目彻底解决BT下载瓶颈

从龟速到极速&#xff1a;如何用trackerslist项目彻底解决BT下载瓶颈 【免费下载链接】trackerslist Updated list of public BitTorrent trackers 项目地址: https://gitcode.com/GitHub_Trending/tr/trackerslist 你是否曾经面对BT下载时那令人沮丧的进度条&#xff1…...

编程新知 2026/5/12 9:55:07

别再死记公式了！用Python的NumPy和Matplotlib玩转坐标转换（附象限处理代码）

用Python实战坐标转换&#xff1a;从数学公式到可视化应用 坐标转换是计算机图形学、机器人学和数据可视化中的基础操作。传统教学中&#xff0c;我们往往被要求死记硬背转换公式&#xff0c;却很少有机会直观理解其实际应用场景。本文将带你用NumPy和Matplotlib这两个Python利…...

编程新知 2026/5/12 9:36:33

深度解析Layui formSelects：现代Web应用中的多选下拉框终极解决方案

深度解析Layui formSelects&#xff1a;现代Web应用中的多选下拉框终极解决方案 【免费下载链接】layui-formSelects Layui select多选小插件 项目地址: https://gitcode.com/gh_mirrors/la/layui-formSelects 在当今的Web开发领域&#xff0c;表单交互体验直接影响着用…...

编程新知 2026/5/12 9:30:03

Python包安装全攻略：从pip、conda到离线安装，总有一种方法适合你

Python包安装全攻略&#xff1a;从pip、conda到离线安装&#xff0c;总有一种方法适合你 在Python开发中&#xff0c;依赖管理是每个开发者必须掌握的核心技能。无论是数据科学家搭建机器学习环境&#xff0c;还是Web开发者部署Django应用&#xff0c;都离不开Python包的安装与…...

编程新知 2026/5/12 8:33:36

PonyAgent 试用笔记：当 LangGraph 太重、Dify 太黑盒，中小企业的第三条路，一个很实用的智能体框架

PonyAgent 试用笔记&#xff1a;当 LangGraph 太重、Dify 太黑盒&#xff0c;中小企业的第三条路 TL;DR&#xff1a;PonyAgent 是一个用 Python 写的极简智能体框架&#xff0c;单文件入口、.env 一处配置、Redis 挂了能自动降级到内存模式。我用 5 分钟在 Windows 上把它跑了起…...

编程新知 2026/5/12 8:30:35

Arm CoreSight TPIU-M调试技术详解与应用

1. Arm CoreSight TPIU-M技术深度解析在嵌入式系统开发中&#xff0c;调试和追踪功能是确保系统可靠性和性能优化的关键。作为Arm CoreSight调试架构的重要组成部分&#xff0c;TPIU-M&#xff08;Trace Port Interface Unit for Cortex-M&#xff09;为Cortex-M系列处理器提供…...

编程新知 2026/5/12 7:11:54