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

用纯 CSS 实现网格背景

news 来源：原创 2025/5/12 21:23:01

是不是在日常开发中经常遇到实现网格的需求，网格通常对网页中展示的元素能起到很好的定位和对齐作用。

这里介绍如何只通过 CSS 来实现这个需求？

使用背景图

这里我们的背景图使用 SVG 来创建，首先，创建绘出一个正方形，填充白色；然后通过矩形实现垂直和水平的线条，进而分别对它们进行定位居中。

 <svg xmlns='http://www.w3.org/2000/svg' 

效果如下：

有了背景图片，我们对给定的区域设置背景：

.grid {
  background-image: url('/path/to/grid.svg');
}
        

如果要避免加载额外的资源，我们也可以通过图片二进制数据的方式嵌入：

.grid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='rgb(203 213 225)' /%3E%3Crect y='50%' width='100%' height='1' fill='rgb(203 213 225)' /%3E%3C/svg%3E%0A");
}
           

默认情况下，背景图像会在垂直和水平方向上重复，这样实现的网格是40个像素。我们也可以通过 background-size 属性来自定义背景图的尺寸。

.grid {
  background-size: 20px;
}
        

这里有个缺点，就是调节图片显示大小的时候，线条的宽度也会有变化。就会导致上面的40像素的网格和20像素的网格线条粗细不一致。

或许最好的做法是改变 SVG 文件里的参数 width 和 height 来调整尺寸：

.grid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='rgb(203 213 225)' /%3E%3Crect y='50%' width='100%' height='1' fill='rgb(203 213 225)' /%3E%3C/svg%3E%0A");
}
           

使用线性渐变

另一种使用 CSS 创建网格背景的方式是通过 linear-gradient() 函数来实现的。

首先选择要为其添加网格背景的元素，并设置 background-image 属性。然后，使用 linear-gradient() 函数指定两种颜色，这两种颜色可以是相似或相同的，它们之间由线条粗细、宽度相同的透明部分分隔开来。

.grid {
  background-image: linear-gradient(to right, gray 1px, transparent 1px);
}
        

这里的 1px 代表网格的线条宽度，你也可以设置成你想要的宽度。

如果要实现水平线条，只需要把 to right 改为 to botton 。而网格实现既需要横向的线条，也需要纵向的线条。

.grid {
  background-image:
    linear-gradient(to right, gray 1px, transparent 1px),
    linear-gradient(to bottom, gray 1px, transparent 1px);
}
        

完整的的样式代码如下：

.grid {
  height: 200px;
  width: 100%;
  background-image:
      linear-gradient(to right, rgb(203 213 225) 1px, transparent 1px),
      linear-gradient(to bottom, rgb(203 213 225) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center center;
}
        

边缘虚化

还有一种场景需要将网格的边缘进行虚化，这时需要借助 mask-image 属性设置用作元素蒙版层的图像，它的值参见文档，这里通过径向渐变的方式实现：

.grid {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%);
}
        

如果你想要四周线性渐变的遮罩效果，则使用如下的代码：

.grid {
  -webkit-mask-image: linear-gradient(to bottom,transparent,#fff 50px calc(100% - 50px),transparent),linear-gradient(to right,transparent,#fff 50px calc(100% - 50px),transparent);
  mask-image: linear-gradient(to bottom,transparent,#fff 50px calc(100% - 50px),transparent),linear-gradient(to right,transparent,#fff 50px calc(100% - 50px),transparent);
  mask-composite: intersect;
  -webkit-mask-composite: source-in, xor;
}
           

网状点阵背景

基于相同的原理，我们来实现一个网状点阵背景，这里需要用到 radial-gradient 函数，创建圆形填充背景色。

.grid {
  height: 200px;
  background-image: radial-gradient(circle, rgb(203 213 225) 2px, #fff 2px);
  background-size: 20px 20px;
  background-position: center center;
}
        

拓展知识

另外关注一下这种模拟透明背景样式的实现原理，它同样可以使用在构建格子花纹的图案上。

.grid {
  height: 200px;
  width: 100%;
  background-image:
    linear-gradient(45deg, #8d8b8b 25%, transparent 0),
    linear-gradient(-45deg, #8d8b8b 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #8d8b8b 0),
    linear-gradient(-45deg, transparent 75%, #8d8b8b 0);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}
        

生成工具

这里为了根据需要快速获得代码，做了一款生成工具：

{
  background-size: 20px 20px;
  background-position: center center;
  background-image: 
    linear-gradient(to right, #cbd5e1 1px, transparent 1px),
    linear-gradient(to bottom, #cbd5e1 1px, transparent 1px);
  -webkit-mask-image: 
    linear-gradient(to bottom, transparent, #fff 50px calc(100% - 50px), transparent),
    linear-gradient(to right, transparent, #fff 50px calc(100% - 50px), transparent);
  mask-image: 
    linear-gradient(to bottom, transparent, #fff 50px calc(100% - 50px), transparent),
    linear-gradient(to right, transparent, #fff 50px calc(100% - 50px), transparent);
  mask-composite: intersect;
  -webkit-mask-composite: source-in, xor;
}
           

线条宽度

1px

10px

网格大小

1 px

100px

线条颜色

是否显示边缘遮罩

渐变半径

10px

200px

用纯 CSS 实现网格背景

是不是在日常开发中经常遇到实现网格的需求，网格通常对网页中展示的元素能起到很好的定位和对齐作用。这里介绍如何只通过 CSS 来实现这个需求？ 使用背景图这里我们的背景图使用 SVG 来创建，首先，创建绘出一个正方形&#xff…...

编程日记 2025/5/12 21:23:01

CNN+LSTM+AM研究方向初尝试

CNNLSTMAM研究方向初尝试简单介绍 CNN CNN 的基本结构卷积层（Convolutional Layer）： 该层通过卷积操作提取输入数据的特征。卷积操作使用多个卷积核（滤波器）对输入图像进行局部感知，从而识别出边缘、纹…...

编程日记 2025/5/12 19:57:58

对比 LiveData 和 Flow 的实现方式

前一段忙完了鸿蒙，现在又开始 Android 开发了。由于之前公司都是都是偏传统开发方式，基本都是 Java 开发 Android 那一套。现在开始学习现代 Android 开发了。对比 LiveData 和 Flow 的实现方式在 Android 开发中，LiveData 和 Flow 都可以用来管理异步数据流和实现 UI 的…...

编程日记 2025/4/26 8:13:35

React.memo 和useMemo 的区别

React.memo 和 useMemo 都是 React 中的性能优化工具，但它们的用途和工作原理不同。以下是它们的主要区别： 1. React.memo React.memo 是一个高阶组件（HOC），用于优化组件的渲染，防止不必要的重新渲染。当组…...

编程日记 2025/5/7 20:53:52

视频码率到底是什么？详细说明

视频码率（Video Bitrate）是指在单位时间内（通常是每秒）传输或处理的视频数据量，用比特（bit）表示。它通常用来衡量视频文件的压缩程度和质量，码率越高，视频质量越好&#…...

编程日记 2025/5/12 20:56:32

CentOS7停更后，如何配置国内Yum源、镜像源

CentOS7停更后，如何配置国内Yum源、镜像源 yum介绍步骤1. 备份原有的yum源文件2. 下载国内Yum源文件3. 清除缓存并更新Yum源4. 使用国内Yum源 yum介绍 Yum（Yellowdog Updater Modified）是一个在CentOS和Red Hat Enterprise Linux&#xff08…...

编程日记 2025/5/9 17:35:04

黑石云｜Linux-基础口令

在Linux系统中，设置和管理口令（密码）是确保系统安全性的重要环节。以下是一些关于Linux基础口令的详细解释和操作指南： 一、口令设置命令 passwd命令功能：用于更改当前用户的密码。使用方法：在终端中输…...

编程日记 2025/5/12 19:53:57

如何配置Github并在本地提交代码

前提: 可以流畅访问github, 需要一些上网技巧, 这就自行处理了申请一个github账号 Github官网地址首先就是邮箱注册啦, github没有对邮箱的限制, 只要是能收邮件的就ok, qq邮箱, 163等都可以使用. 然后和普通注册账号一样, 一路填写需要的信息, 验证邮箱即可. 如何新增代…...

编程日记 2025/5/12 20:02:41

UiPath API接口说明

Swagger网址私有云网址（企业版） https://企业/swagger/index.html 公有云网址（社区版） https://cloud.uipath.com/linan/LinanZhang/orchestrator_/swagger/index.html#/ 常见问题 Swagger页面测试请求时报错“You are not a…...

编程日记 2025/5/12 15:57:57

Ubuntu22.04上kdump和crash的使用

0.前言 1.引用： 解决Linux内核问题实用技巧之 - Crash工具结合/dev/mem任意修改内存-腾讯云开发者社区-腾讯云解决Linux内核问题实用技巧之-dev/mem的新玩法-腾讯云开发者社区-腾讯云 ubuntu内核转储分析——kdump和crash的下载和使用_ubuntu kdump-CSDN博客 U…...

编程日记 2025/5/12 5:08:30

【2025最新计算机毕业设计】基于SSM+Vue中华传统文化吟诵知识学习系统

作者简介：✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容：🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…...

编程日记 2025/5/12 4:21:26

智能社区服务小程序+ssm(lw+演示+源码+运行）

摘要随着信息技术在管理上越来越深入而广泛的应用，管理信息系统的实施在技术上已逐步成熟。本文介绍了智能社区服务小程序的开发全过程。通过分析智能社区服务小程序管理的不足，创建了一个计算机管理智能社区服务小程序的方案。文章介绍了智能社区服务…...

编程日记 2025/5/12 20:30:25

windows10电脑缺少dll文件的解决方案，系统缺少dll修复指南

在使用Windows 10操作系统时，有时会遇到由于缺少某些动态链接库（Dynamic Link Library, 简称DLL）文件而导致程序无法正常运行的问题。本指南将介绍几种解决此类问题的方法。什么是DLL文件？ DLL文件是Windows系统中的一种特殊类型…...

编程日记 2025/5/4 12:32:24

【设计模式系列】工厂方法模式（二十一）

一、什么是工厂方法模式工厂方法模式（Factory Method Pattern）是一种创建型设计模式，其核心目的是定义一个创建对象的接口，但让实现这个接口的子类来决定实例化哪一个类。工厂方法模式让类的实例化推迟到子类中进行，…...

编程日记 2025/5/12 20:41:00

etcd资源超额

集群内apiserver一直重启，重启kubelet服务后查看日志发现一下报错： Error from server: etcdserver: mvcc: database space exceeded 报错原因： etcd服务未设置自动压缩参数（auto-compact） etcd 默认不会自动 compa…...

编程日记 2025/5/12 19:57:58

数据结构与算法学习笔记----DFS

数据结构与算法学习笔记----DFS author: 明月清了个风 first publish time: 2024.12.4 revised: 2024.12.5 - 加了Acwing 843. n-皇后问题。 ps⛹感觉DFS的题基本的思想就是递归，但是每题都有不一样的地方，每一题的思路和模拟过程都单独写在每一题里…...

编程日记 2025/5/11 7:32:00

力扣54.螺旋矩阵

题目描述题目链接54. 螺旋矩阵给你一个 m 行 n 列的矩阵 matrix ，请按照顺时针螺旋顺序 ，返回矩阵中的所有元素。示例 1： 输入：matrix [[1,2,3],[4,5,6],[7,8,9]] 输出：[1,2,3,6,9,8,7,4,5]示例 2：…...

编程日记 2025/5/8 11:47:58

【原生js案例】webApp实现一个分享到的功能

这种分享到的效果很常见，在我们的网站上。鼠标滑入展示，滑出就隐藏。现在我们使用定时器功能来实现这种滑动效果。感兴趣的可以关注下我的系列课程【webApp之h5端实战】，里面有大量的css3动画效果制作原生知识分析，讲解&#xf…...

编程日记 2025/5/12 21:14:14

iPhone手机清理软件：相册清理大师推荐

随着智能手机成为我们日常生活的必需品，手机中的数据日益膨胀，尤其是照片和视频这类容易积累的文件。对于iPhone用户来说，管理这些文件，特别是清理相册变得尤为重要。本文将介绍一款备受推崇的iPhone手机清理软件——CleanMyPhone…...

编程日记 2025/5/11 21:58:01

Javaweb梳理21——Servlet

Javaweb梳理21——Servlet 21 Servlet21.1 简介21.3 执行流程21.4 生命周期4.5 方法介绍21.6 体系结构21.7 urlPattern配置21.8 XML配置 21 Servlet 21.1 简介 Servlet是JavaWeb最为核心的内容，它是Java提供的一门动态web资源开发技术。使用Servlet就可以实现&…...

编程日记 2025/5/9 5:31:30

Serverless 时代

前端的边界探索，从客户端展开，以跨端为目标，用一套 JavaScript 代码生成多端平台，以此来实现大前端的统一。虽然在这条路上还不算尽善尽美，但各家公司的跨端方案已基本趋于成熟，并且已经运用到生产环境中。…...

编程日记 2025/5/7 15:24:09

docker安装clickhouse副本集群

docker安装clickhouse副本集群 1、clickhouse副本集群搭建1.1、docker安装zookeeper集群1.1.1、zookeeper第一个节点安装1.1.2、zookeeper第二个节点安装1.1.3、zookeeper第三个节点安装1.1.4、zookeeper客户端命令 2、Clickhouse副本集群搭建2.1、clickhouse搭建2.2、验证集群…...

编程日记 2025/5/12 19:57:57

详解AI网关助力配电房实现智能化管控应用

对于一些建设年份久远的老旧配电房，由于配套降温散热设施设备不完善、线路设备老化等因素，极易出现因环境过热而影响设备正常稳定运行，进而导致电气故障甚至火灾等事故产生。基于AI网关的配电房智能监控及管理针对配电房的实时安全监测及…...

编程日记 2025/5/11 3:01:49

uniapp调用腾讯定位api

1、注册腾讯地址api接口，创建应用获取key WebService API | 腾讯位置服务 2、配置获取方法getCity // 定位服务getCity(latitude, longitude) {const key XXXX-XXXX-XXXX-XXXX-XXXX; // 替换为你的腾讯位置服务密钥const url /apis.map.qq.com/ws/geocoder/v1/…...

编程日记 2025/5/12 19:49:11

映射vim键位,基本功能键位表(未更完)

键位映射：建议使用jj代替esc,毕竟esc离手那么远 linux下修改方法是：vim /etc/vim/vimrc 在该文件尾添加inoremap jj <Esc>该方法可以同样可以用到其他键位映射上 i：表示这个映射是在插入模式（insert mode）下有效…...

编程日记 2025/5/4 17:22:29

【Python】爬虫实战03：自动化抢票脚本【某麦网】

1. 脚本介绍 1.1 背景介绍在这个数字化时代，演唱会、体育赛事和各种活动的门票销售往往在线上进行。由于热门活动的高需求和门票的有限供应，抢票成为了一场激烈的竞争。许多粉丝和爱好者经常因为手速不够快或网络延迟而错失购票机会。为了提高抢票的成…...

编程日记 2025/5/11 23:25:38

继承System.Web.Http.ApiController的Action的Model如果被[Serializable]定义，会导致Model的字段无法绑定。 Microsoft.AspNet.WebApi.Core.5.2.3\lib\net45\System.Web.Http.dll [Serializable] public class Model {public string id { get; set; } }public MyA…...

编程日记 2025/5/6 8:21:28

ISAAC SIM踩坑记录--添加第三方3D场景

ISAAC SIM仿真首先就是要有合适的3D场景，官方提供了一些场景，如果不能满足要求，那就只能自己建。对于我这种不会3D建模的菜鸟，只能到网上下载了，sketchfab就是一个不错的平台，有不少免费资源可以下载。 …...

编程日记 2025/5/11 0:24:17

Linux中Crontab（定时任务）命令详解

文章目录 Linux中Crontab（定时任务）命令详解一、引言二、Crontab的基本使用1、Crontab命令格式2、Crontab常用操作三、Crontab的配置与服务管理1、配置Crontab2、服务管理四、使用示例1、每天凌晨2点备份网站数据2、每周一凌晨3点清理临时文件3、每月的…...

编程日记 2025/5/11 14:59:29

在Ubuntu中运行和管理AppImage

文章目录什么是AppImage？如何在Ubuntu中运行AppImage？如何管理AppImage？安装AppImageLauncher如何添加AppImage到系统？如何从系统中移除AppImage？ 总结什么是AppImage？ AppImage是一种将应用程序打包为单…...

编程日记 2025/5/10 14:15:46

2024年12月大语言模型最新对比：GPT-4、Claude 3、文心一言等详细评测

前言随着人工智能技术的快速发展，大语言模型(LLM)已经成为了技术领域最热门的话题。本文将详细对比目前主流的大语言模型，帮助大家选择最适合的工具。一、OpenAI GPT系列 1. GPT-4 核心优势： 多模态理解能力强逻辑推理能力出色创造…...

编程日记 2025/5/3 4:32:15

上下位关系自动检测方法

✨✨ 欢迎大家来访Srlua的博文（づ￣3￣）づ╭❤～✨✨ 🌟🌟 欢迎各位亲爱的读者，感谢你们抽出宝贵的时间来阅读我的文章。我是Srlua小谢，在这里我会分享我的知识和经验。&am…...

编程日记 2025/5/8 22:59:07

Linux入门攻坚——40、Linux集群系统入门-lvs（1）

Cluster，集群，为了解决某个特定问题将多台计算机组合起来形成的单个系统。这个单个集群系统可以扩展，系统扩展的方式：scale up，向上扩展，更换更好的主机；scale out，向外扩展&…...

编程日记 2025/4/29 21:59:26

结构篇| 浅析LLaMA网络架构

01 前言 LLaMA（Large Language Model Meta AI）是由Meta AI 发布的一个开放且高效的大型基础语言模型。为什么突然讲这个模型，主要LLaMA 已经成为了最受欢迎的开源大语言模型之一，LLaMA 系列模型在学术界和工业界引起了广泛的关注，对于推动大语言模型技术的开源发展做出了…...

编程日记 2025/5/6 5:49:47

CTF-PWN: 全保护下格式化字符串利用 [第一届“吾杯”网络安全技能大赛如果能重来] 赛后学习(不会)

通过网盘分享的文件：如果能重来.zip 链接: https://pan.baidu.com/s/1XKIJx32nWVcSpKiWFQGpYA?pwd1111 提取码: 1111 --来自百度网盘超级会员v2的分享漏洞分析格式化字符串漏洞,在printf(format); __int64 sub_13D7() {char format[56]; // [rsp10h] [rbp-40h]…...

编程日记 2025/5/5 23:59:22

openEuler卸载 rpm安装的 redis

停止 Redis 服务 sudo systemctl stop redis禁用 Redis 服务 sudo systemctl disable redis 卸载 Redis 软件包 sudo yum remove redis查找并删除 Redis 的残留文件 find / -name red*删除 Redis 配置文件删除 Redis 数据文件 sudo rm -rf /var/lib/redis检查 Redis 是否…...

编程日记 2025/5/11 5:09:34

xxl-job分布式任务调度

XXL-JOB是一个轻量级分布式任务调度平台，其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线，开箱即用。 GitHub：https://github.com/xuxueli/xxl-job 码云：https://gitee.com/xuxue…...

编程日记 2025/5/6 3:15:57

flutter_quill如何设置Editor中的文字为富文本

比如一个场景在输入框中，某某某是一个颜色，其他文本是一个颜色这里要注意 const QuillEditor({required this.controller,required this.focusNode,required this.scrollController,required this.scrollable,required this.padding,required this…...

编程日记 2025/5/7 20:52:42

shell语法（1）bash

shell是我们通过命令行与操作系统沟通的语言，是一种解释型语言 shell脚本可以直接在命令行中执行，也可以将一套逻辑组织成一个文件，方便复用 Linux系统中一般默认使用bash为脚本解释器在Linux中创建一个.sh文件，例如vim test.sh…...

编程日记 2025/5/11 17:55:15

AgGrid 组件封装设计笔记：自定义 icon 以及每个 icon 的点击事件处理

文章目录问题目前解决效果 v1思路目前解决效果 v0思路代码V1 问题自己封装的 AgGrid 如何自定义传递 icon ，以及点击事件的处理？ 目前解决效果 v1 思路目前解决效果 v0 思路一张图片说明一下代码 V1 父组件使用 <template><MyPageL…...

编程日记 2025/5/11 8:03:26

什么是TCP的三次握手

TCP（传输控制协议）的三次握手是一个用于在两个网络通信的计算机之间建立连接的过程。这个过程确保了双方都有能力接收和发送数据，并且初始化双方的序列号。以下是三次握手的详细步骤： 第一次握手（SYN）&…...

编程日记 2025/5/7 23:33:12

ElasticSearch学习记录

服务器操作系统版本：Ubuntu 24.04 Java版本：21 Spring Boot版本：3.3.5 如果打算用GUI，虚拟机安装Ubuntu 24.04，见虚拟机安装Ubuntu 24.04及其常用软件(2024.7)_ubuntu24.04-CSDN博客文章浏览阅读6.6k次&#xff0…...

编程日记 2025/5/7 14:55:32

10.在 Vue 3 中使用 OpenLayers 加载引用 Stamen 地图（多种形式）

在 Web 地图开发中，OpenLayers 是一个非常强大且灵活的 JavaScript 库，它可以帮助我们加载各种地图层（如 OpenStreetMap、Google Maps、Bing Maps 等）。而 Stamen 地图是一个非常常见的地图样式，它提供了多种地图样式&…...

编程日记 2025/5/5 23:23:30

json与proto序列化,反序列化性能对比

1. 说proto快,必须知道他快多少?为什么快? 快多少? // 测试proto序列化和反序列化的性能func BenchmarkProtobufMarshal(b *testing.B) {// 创建一个 Request 对象req : &demo.Request{Ping: "ping",}// 测试序列化的性能b.ResetTimer()for i : 0; i < b…...

编程日记 2025/5/6 19:56:07

[Redis#14] 持久化 | RDB | bgsave | check-rdb | 灾备

目录 0.概述持久化的策略 1 RDB 1.1 触发机制 1.2 流程说明 1.3 RDB 的优缺点 0.概述在学习 MySQL 数据库时，我们了解到事务的四个核心特性：原子性、一致性、持久性和隔离性。这些特性确保了数据库操作的安全性和可靠性。当我们转向 Redis 时&a…...

编程日记 2025/5/8 14:57:00

ubuntu部署RocketMQ

Quick Start RocketMQ 下载解压把下载的文件解压重命名，放在想放的位置需要提前配置JDK环境变量，或者直接在配置文件中指定JAVA_HOME 编辑编辑 rocketmq/bin下的 runserver.sh 和runbroker.sh文件，把内存大小改小一点，因为…...

编程日记 2025/5/8 22:39:41

深入浅出：PHP中的变量与常量全解析

文章目录引言理解变量普通变量赋值操作变量间赋值引用赋值取消引用可变变量预定义变量理解常量声明常量使用define()函数const关键字使用常量预定义常量扩展话题：作用域与生命周期实战案例总结与展望参考资料引言在编程的世界里，变量和常量是两种…...

编程日记 2025/5/9 9:53:44

概率论相关知识随记

作为基础知识的补充，随学随记，方便以后查阅。概率论相关知识随记期望（Expectation）期望的定义离散型随机变量的期望示例：掷骰子的期望连续型随机变量的期望示例：均匀分布的期望期望的性质线性性质期望的…...

编程日记 2025/5/6 17:34:27

gpt-computer-assistant - 极简的 GPT-4o 客户端

更多AI开源软件： AI开源 - 小众AIhttps://www.aiinn.cn/sources gpt-computer-assistant是一个将 ChatGPT MacOS 应用程序提供给 Windows 和 Linux 的替代工作。因此，这是一个全新且稳定的项目。此时，您可以轻松地将其作为 Python 库安装&am…...

编程日记 2025/5/8 0:11:14

【Java开发】Springboot集成mybatis-plus

1、引入 mybatis-plus 依赖 <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.0</version> </dependency>  <dependen…...

编程日记 2025/5/11 14:10:15

使用背景图​

使用线性渐变​

边缘虚化​

网状点阵背景​

拓展知识​

生成工具​