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

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

news 2026/4/4 11:30:38

一、前言

记录一些有趣的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

Qwen3.5-9B-AWQ-4bit与Claude对比评测：开源与闭源模型的技术选型

Qwen3.5-9B-AWQ-4bit与Claude对比评测&#xff1a;开源与闭源模型的技术选型 1. 评测背景与目标 在AI大模型领域&#xff0c;开源与闭源模型的选择一直是开发者面临的重要决策。本次评测聚焦于两款在开发者社区中备受关注的模型&#xff1a;开源的Qwen3.5-9B-AWQ-4bit和闭源的…...

编程新知 2026/4/4 10:53:37

【架构实战】读写分离中间件对比（ShardingSphere/MyCat）

一、为什么需要读写分离 在大多数互联网应用中&#xff0c;读操作远多于写操作&#xff1a; 读请求&#xff1a;70-80% 写请求&#xff1a;20-30%单机数据库的问题&#xff1a; 主库&#xff1a;处理所有写请求 部分读请求↓ 连接池耗尽 → 响应变慢 → 用户投诉解决方案&a…...

编程新知 2026/4/4 9:37:05

Nano-Banana企业级部署：支持API接入PLM系统，打通产品数据链路

Nano-Banana企业级部署&#xff1a;支持API接入PLM系统&#xff0c;打通产品数据链路 1. 引言&#xff1a;企业级部署的价值与意义 在现代制造业和设计行业中&#xff0c;产品数据管理一直是个令人头疼的问题。设计师创作的产品分解图、技术团队制作的结构示意图、营销部门需…...

编程新知 2026/4/4 8:30:35

OpenClaw低配部署：gemma-3-12b-it在4GB内存设备上的运行方案

OpenClaw低配部署&#xff1a;gemma-3-12b-it在4GB内存设备上的运行方案 1. 为什么要在低配设备上部署OpenClaw&#xff1f; 去年我入手了一台二手Mac mini&#xff08;8GB内存版&#xff09;&#xff0c;本想用它作为家庭媒体中心&#xff0c;后来突发奇想&#xff1a;能不能…...

编程新知 2026/4/4 8:22:32

AirPodsDesktop：Windows平台苹果耳机功能增强工具

AirPodsDesktop&#xff1a;Windows平台苹果耳机功能增强工具 【免费下载链接】AirPodsDesktop ☄️ AirPods desktop user experience enhancement program, for Windows and Linux (WIP) 项目地址: https://gitcode.com/gh_mirrors/ai/AirPodsDesktop AirPodsDesktop是…...

编程新知 2026/4/4 8:08:16

RWKV7-1.5B-G1A数据库课程设计案例：智能学术问答系统

RWKV7-1.5B-G1A数据库课程设计案例&#xff1a;智能学术问答系统 1. 项目背景与价值 最近在批改数据库课程作业时&#xff0c;发现很多同学对如何将数据库知识与实际应用结合感到困惑。传统的图书管理系统设计已经难以激发学生兴趣。于是我们尝试引入大模型技术&#xff0c;设…...

编程新知 2026/4/4 7:46:05

微信小程序对接实战：快速开发集成通义千问1.5-1.8B模型的AI聊天应用

微信小程序对接实战&#xff1a;快速开发集成通义千问1.5-1.8B模型的AI聊天应用 你是不是也想过&#xff0c;给自己的微信小程序加上一个智能聊天助手&#xff1f;比如&#xff0c;做一个能解答用户问题的客服机器人&#xff0c;或者一个能陪你闲聊、帮你写文案的创意伙伴。听…...

编程新知 2026/4/4 6:49:46

物联网毕业设计本科生开题指导

【单片机毕业设计项目分享系列】 &#x1f525; 这里是DD学长&#xff0c;单片机毕业设计及享100例系列的第一篇&#xff0c;目的是分享高质量的毕设作品给大家。 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的单片机项目缺少创新和亮点…...

编程新知 2026/4/4 6:33:43

前有张雪峰，后有张雪——这难道是天意-他们的成功最大的特点就是把事情做到极致，你只要坚持，就可能会成功！-你不坚持，不热爱，不可能会成功！-为什么摩托车发动机可以弯道超车，汽车不可以？到底中国汽车的发

前有张雪峰，后有张雪——这难道是天意-他们的成功最大的特点就是把事情做到极致，你只要坚持，就可能会成功！-你不坚持，不热爱，不可能会成功！-为什么摩托车发动机可以弯道超车，汽车不可以？到底中国汽车的发动机质量如何？ 前有张雪峰，后有张雪——这难道是天意-他们的成…...

编程新知 2026/4/4 6:29:42

REX-UniNLU与LaTeX协同工作：智能学术论文写作助手

REX-UniNLU与LaTeX协同工作&#xff1a;智能学术论文写作助手 科研写作的痛点&#xff0c;只有经历过的人才懂&#xff1a;反复调整格式、手动整理参考文献、绞尽脑汁写图表描述... 但现在&#xff0c;AI技术正在改变这一切。 1. 学术写作的新革命 如果你正在写学术论文&#…...

编程新知 2026/4/4 6:29:42