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

《CSS3》田字网格背景（外实线内虚线）的实现

news 2025/7/18 23:43:24

一、前言

记录一些有趣的CSS实现方式，总所周知，当一段效果可以通过CSS实现的时候，绝不使用Javascript来实现，因此记录一些有意思的CSS效果，一来是方便自己学习，另一来是方便以后在需要使用到的时候能快速找到并使用上~

耐心看完，你也许有所收获～

二、实现效果

大致效果如下，文章结尾有代码，想要的自取，如果想要看demo的可以看这个地址：gitee项目demo地址icon-default.png?t=N7T8https://gitee.com/yin_zhuqun/css-demo

三、CSS要点

这个效果其实没有什么复杂的CSS写法，核心的要点就是对 background属性 的利用；MDN关于background属性的说明icon-default.png?t=N7T8https://developer.mozilla.org/zh-CN/docs/Web/CSS/background

思路大致有两点：

  1. 实线和虚线分开根据不同的尺寸画格子，然后利用background-repeat的铺满效果将整个页面平铺完整；
  2. 实线就是单独的线，虚线的实现则利用transparent这个透明属性进行隔断；

别的好像也没什么特别的点了，剩下的无非就是根据实际场景凑样式换颜色了；

四、实现代码

<!DOCTYPE html>
<html lang="cn"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS网格线,田字格</title><style>body,html {position: relative;width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}.text-style {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 12px 20px;background-color: #ffffff;font-size: 22px;font-weight: bold;letter-spacing: 2px;}/* 具体CSS样式部分 */:root {--gridColor: #888888;/* --gridColor: #000000; */--gridDottedLine: 20px;--gridSolidLine: 60px;}.dotted-line {position: fixed;width: 100%;height: 100%;transform: scale(1.1);overflow: hidden;z-index: -4;}.dotted-line::before,.dotted-line::after {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0.8;content: "";}.dotted-line::before {background: linear-gradient(to right,white 1px,transparent 1px),linear-gradient(to bottom,var(--gridColor) 0.5px,transparent 0.5px);background-size: 4px var(--gridDottedLine);}.dotted-line::after {background: linear-gradient(to bottom,white 1px,transparent 1px),linear-gradient(to right,var(--gridColor) 0.5px,transparent 0.5px);background-size: var(--gridDottedLine) 4px;}.solid-line {position: fixed;width: 100%;height: 100%;transform: scale(1.1);overflow: hidden;z-index: -2;background: linear-gradient(to right,var(--gridColor) 0.5px,transparent 0.5px),linear-gradient(to bottom,var(--gridColor) 0.5px,transparent 0.5px);background-size: var(--gridSolidLine) var(--gridSolidLine);}</style></head><body><div class="dotted-line"></div><div class="solid-line"></div><div class="text-style">田字网格线（外实内虚）</div></body>
</html>

相关文章：

《CSS3》田字网格背景（外实线内虚线）的实现

一、前言 记录一些有趣的CSS实现方式&#xff0c;总所周知&#xff0c;当一段效果可以通过CSS实现的时候&#xff0c;绝不使用Javascript来实现&#xff0c;因此记录一些有意思的CSS效果&#xff0c;一来是方便自己学习&#xff0c;另一来是方便以后在需要使用到的时候能快速找…...

编程日记 2024/1/31 6:17:59

图书管理系统(ArrayList和LinkedList)--versions3.0

目录 一、项目要求&#xff1a; 二、项目环境 三、项目使用的知识点 四、项目代码 五、项目运行结果 六、项目难点分析 图书管理系统--versions1.0&#xff1a; 图书管理系统--versions1.0-CSDN博客文章浏览阅读981次&#xff0c;点赞29次&#xff0c;收藏17次。本文使用…...

编程日记 2024/1/31 6:16:58

游戏开发丨基于Pygame的AI版贪吃蛇小游戏

文章目录 写在前面需求分析程序设计程序分析运行结果系列文章写在后面 写在前面 本期内容 基于pygame的AI版贪吃蛇小游戏 所需环境 pythonpycharm或anacondapygame 下载地址 https://download.csdn.net/download/m0_68111267/88789665 需求分析 本游戏使用Pygame模块开…...

编程日记 2024/1/31 6:15:57

qt-C++笔记之QStringList、QList＜QString＞、QString、QChar、QList＜QChar＞区别

qt-C笔记之QStringList、QList、QString、QChar、QList区别 —— 杭州 2024-01-30 凌晨0:27 参考博文&#xff1a;qt-C笔记之QStringList code review! 文章目录 qt-C笔记之QStringList、QList<QString>、QString、QChar、QList<QChar>区别1.Qt的字符容器类1.QSt…...

编程日记 2024/1/31 6:13:55

python爬虫学习之解析_BeautifulSoup

目录 一、bs4的基本使用 &#xff08;1&#xff09;导入 &#xff08;2&#xff09;创建对象 二、节点定位 1、根据标签名查找节点 2、基本函数使用 &#xff08;1&#xff09;find &#xff08;2&#xff09;find_all &#xff08;3&#xff09;select 三、节点信息 1、获取节…...

编程日记 2024/1/31 6:12:54

2024美赛数学建模赛题解读常用模型算法

回归拟合预测 拟合预测是建立一个模型去逼近实际数据序列的过程&#xff0c;适用于发展性的体系。建立模型时&#xff0c;通常都要指定一个有明确意义的时间原点和时间单位。而且&#xff0c;当t趋向于无穷大时&#xff0c;模型应当仍然有意义。将拟合预测单独作为一类体系研究…...

编程日记 2024/1/31 6:10:53

NoSQL 数据库管理系统和模型的比较

前些天发现了一个人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;最重要的屌图甚多&#xff0c;忍不住分享一下给大家。点击跳转到网站。 NoSQL 数据库管理系统和模型的比较 介绍 当大多数人想到数据库时&#xff0c;他们通常会想到传统的关系数据库…...

编程日记 2024/1/31 6:09:52

数据库（SQL）

目录 1 触发器 1.1 触发器简介 1.2 触发器的创建 语法 说明 1.3 示例 2 存储过程 2.1 什么是存储过程&#xff08;函数&#xff09; 2.1.1 存储过程和存储函数的区别 2.2 优势 2.3 应用场景 2.4 存储过程的创建和使用 说明 各参数类型所实现的存储过程 无参数无返…...

编程日记 2024/1/31 6:08:51

如何用Docker+jenkins 运行 python 自动化？

1.在 Linux 服务器安装 docker 2.创建 jenkins 容器 3.根据自动化项目依赖包构建 python 镜像(构建自动化 python 环境) 4.运行新的 python 容器&#xff0c;执行 jenkins 从仓库中拉下来的自动化项目 5.执行完成之后删除容器 前言 环境准备 Linux 服务器一台(我的是 CentOS7)…...

编程日记 2024/1/31 6:07:50

uniapp瀑布流实现

1. 图片瀑布流&#xff1a; 不依赖任何插件&#xff0c;复制即可见效&#xff1a; <template><view class"page"><view class"left" ref"left"><image class"image" v-for"(item,i) in leftList" :k…...

编程日记 2024/1/31 6:06:49

鸿蒙：@Link装饰器-父子双向同步

子组件中被Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。从API version 9开始&#xff0c;该装饰器支持在ArkTS卡片中使用。 需要注意&#xff1a;Link装饰的变量与其父组件中的数据源共享相同的值。Link装饰器不能在Entry装饰的自定义组件中使用。 一、装饰器使…...

编程日记 2024/1/31 6:05:48

Leetcode--27

给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新长度后面…...

编程日记 2024/1/31 6:04:48

使用Eclipse搞Android项目报错

相信现在都没什么人还会用Eclipse来开发的了。 不过安装完后&#xff0c;打开Eclipse会提示我的Jdk版本不符合 --------------------------- Incompatible JVM --------------------------- Version 1.8.0_391 of the JVM is not suitable for this product. Version: 17 or g…...

编程日记 2024/1/31 6:00:44

import sys是什么

import sys语句 允许你使用sys模块提供的各种功能&#xff0c;从而更好地与Python解释器和操作系统底层进行交互。通过熟练掌握sys模块的使用&#xff0c;可以大大提高Python开发的效率和灵活性。 sys模块 是Python的内置模块之一&#xff0c;用于与Python解释器和系统环境交…...

编程日记 2024/1/31 5:59:43

Python爬虫：XPath基本语法

XPath&#xff08;XML Path Language&#xff09;是一种用于在XML文档中定位元素的语言。它使用路径表达式来选择节点或节点集&#xff0c;类似于文件系统中的路径表达式。 不啰嗦&#xff0c;讲究使用&#xff0c;直接上案例。 导入 pip3 install lxmlfrom lxml import etr…...

编程日记 2024/1/31 5:58:42

UML/SysML建模工具更新情况（截至2024年1月）（1）UModel 2024

最近一段时间更新的工具有&#xff1a; 工具最新版本&#xff1a;Umple 1.33.0 更新时间&#xff1a;2024年1月10日 工具简介 自称“Model-Oriented Programming”&#xff0c;把图形和文本结合起来&#xff0c;支持Java、PHP和Ruby代码生成&#xff0c;可以在线使用&#xf…...

编程日记 2024/1/31 5:57:41

ubuntu20-github不通问题

github不通 一直在github下载失败 Git报错fatal unable to connect to github.com: github.com[0: 20.205.243.166] >>> alsa-ucm-conf v1.2.6.3 Downloading(卡在这里,很烦啊) 然后搜了很多文档,然后以下操作: 1.GitHub.com - GitHub: Lets build from here Git…...

编程日记 2024/1/31 5:54:39

【MAC】Multi-Level Monte Carlo Actor-Critic阅读笔记

基本思想&#xff1a; 利用多层次蒙特卡洛方法&#xff08;Multi-Level Monte Carlo&#xff0c;MLMC&#xff09;和Actor-Critic算法&#xff0c;解决平均奖励强化学习中的快速混合问题。 快速混合&#xff1f; 在强化学习中&#xff0c;当我们说一个策略"混合得快"…...

编程日记 2024/1/31 5:52:37

[GN] 设计模式—— 创建型模式

文章目录 创建型模式单例模式 -- 确保对象唯一性例子优化饿汉式懒汉式 优缺点使用场景 简单工厂模式例子&#xff1a;优化优缺点适用场景 工厂方法模式 -- 多态工厂的实现例子优缺点优化适用场景 抽象工厂模式 -- 产品族的创建例子优缺点适用场景 总结 创建型模式 单例模式 –…...

编程日记 2024/1/31 5:50:35

链表——超详细

一、无头单向非循环链表 1.结构&#xff08;两个部分&#xff09;&#xff1a; typedef int SLTDataType; typedef struct SListNode {SLTDataType data;//数据域struct SListNode* next;//指针域 }SLNode; 它只有一个数字域和一个指针域&#xff0c;里面数据域就是所存放的…...

编程日记 2024/1/31 5:49:34

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/7/18 18:44:09

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/7/12 6:45:46

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/7/10 15:49:28

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/7/18 7:00:21

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/6/16 16:58:04

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/7/15 6:43:23

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

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

编程新知 2025/7/18 12:09:51

Python常用模块：time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...

编程新知 2025/6/16 14:43:58

【51单片机】4. 模块化编程与LCD1602Debug

1. 什么是模块化编程 传统编程会将所有函数放在main.c中&#xff0c;如果使用的模块多&#xff0c;一个文件内会有很多代码&#xff0c;不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里&#xff0c;在.h文件里提供外部可调用函数声明&#xff0c;其他.c文…...

编程新知 2025/7/17 11:05:02

【java】【服务器】线程上下文丢失 是指什么

目录 ■前言 ■正文开始 线程上下文的核心组成部分 为什么会出现上下文丢失&#xff1f; 直观示例说明 为什么上下文如此重要&#xff1f; 解决上下文丢失的关键 总结 ■如果我想在servlet中使用线程&#xff0c;代码应该如何实现 推荐方案&#xff1a;使用 ManagedE…...

编程新知 2025/7/5 21:03:34