《CSS3》田字网格背景（外实线内虚线）的实现
一、前言
记录一些有趣的CSS实现方式，总所周知，当一段效果可以通过CSS实现的时候，绝不使用Javascript来实现，因此记录一些有意思的CSS效果，一来是方便自己学习，另一来是方便以后在需要使用到的时候能快速找到并使用上~
耐心看完，你也许有所收获～
二、实现效果
大致效果如下，文章结尾有代码，想要的自取，如果想要看demo的可以看这个地址：gitee项目demo地址
https://gitee.com/yin_zhuqun/css-demo
三、CSS要点
这个效果其实没有什么复杂的CSS写法，核心的要点就是对 background属性 的利用；MDN关于background属性的说明https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
思路大致有两点：
- 实线和虚线分开根据不同的尺寸画格子，然后利用background-repeat的铺满效果将整个页面平铺完整；
- 实线就是单独的线，虚线的实现则利用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实现方式，总所周知，当一段效果可以通过CSS实现的时候，绝不使用Javascript来实现，因此记录一些有意思的CSS效果，一来是方便自己学习，另一来是方便以后在需要使用到的时候能快速找…...
图书管理系统(ArrayList和LinkedList)--versions3.0
目录 一、项目要求： 二、项目环境 三、项目使用的知识点 四、项目代码 五、项目运行结果 六、项目难点分析 图书管理系统--versions1.0： 图书管理系统--versions1.0-CSDN博客文章浏览阅读981次，点赞29次，收藏17次。本文使用…...
游戏开发丨基于Pygame的AI版贪吃蛇小游戏
文章目录 写在前面需求分析程序设计程序分析运行结果系列文章写在后面 写在前面 本期内容 基于pygame的AI版贪吃蛇小游戏 所需环境 pythonpycharm或anacondapygame 下载地址 https://download.csdn.net/download/m0_68111267/88789665 需求分析 本游戏使用Pygame模块开…...
qt-C++笔记之QStringList、QList＜QString＞、QString、QChar、QList＜QChar＞区别
qt-C笔记之QStringList、QList、QString、QChar、QList区别 —— 杭州 2024-01-30 凌晨0:27 参考博文：qt-C笔记之QStringList code review! 文章目录 qt-C笔记之QStringList、QList<QString>、QString、QChar、QList<QChar>区别1.Qt的字符容器类1.QSt…...
python爬虫学习之解析_BeautifulSoup
目录 一、bs4的基本使用 （1）导入 （2）创建对象 二、节点定位 1、根据标签名查找节点 2、基本函数使用 （1）find （2）find_all （3）select 三、节点信息 1、获取节…...
2024美赛数学建模赛题解读常用模型算法
回归拟合预测 拟合预测是建立一个模型去逼近实际数据序列的过程，适用于发展性的体系。建立模型时，通常都要指定一个有明确意义的时间原点和时间单位。而且，当t趋向于无穷大时，模型应当仍然有意义。将拟合预测单独作为一类体系研究…...
NoSQL 数据库管理系统和模型的比较
前些天发现了一个人工智能学习网站，通俗易懂，风趣幽默，最重要的屌图甚多，忍不住分享一下给大家。点击跳转到网站。 NoSQL 数据库管理系统和模型的比较 介绍 当大多数人想到数据库时，他们通常会想到传统的关系数据库…...
数据库（SQL）
目录 1 触发器 1.1 触发器简介 1.2 触发器的创建 语法 说明 1.3 示例 2 存储过程 2.1 什么是存储过程（函数） 2.1.1 存储过程和存储函数的区别 2.2 优势 2.3 应用场景 2.4 存储过程的创建和使用 说明 各参数类型所实现的存储过程 无参数无返…...
如何用Docker+jenkins 运行 python 自动化？
1.在 Linux 服务器安装 docker 2.创建 jenkins 容器 3.根据自动化项目依赖包构建 python 镜像(构建自动化 python 环境) 4.运行新的 python 容器，执行 jenkins 从仓库中拉下来的自动化项目 5.执行完成之后删除容器 前言 环境准备 Linux 服务器一台(我的是 CentOS7)…...
uniapp瀑布流实现
1. 图片瀑布流： 不依赖任何插件，复制即可见效： <template><view class"page"><view class"left" ref"left"><image class"image" v-for"(item,i) in leftList" :k…...
鸿蒙：@Link装饰器-父子双向同步
子组件中被Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。从API version 9开始，该装饰器支持在ArkTS卡片中使用。 需要注意：Link装饰的变量与其父组件中的数据源共享相同的值。Link装饰器不能在Entry装饰的自定义组件中使用。 一、装饰器使…...
Leetcode--27
给你一个数组 nums 和一个值 val，你需要 原地 移除所有数值等于 val 的元素，并返回移除后数组的新长度。 不要使用额外的数组空间，你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新长度后面…...
使用Eclipse搞Android项目报错
相信现在都没什么人还会用Eclipse来开发的了。 不过安装完后，打开Eclipse会提示我的Jdk版本不符合 --------------------------- Incompatible JVM --------------------------- Version 1.8.0_391 of the JVM is not suitable for this product. Version: 17 or g…...
import sys是什么
import sys语句 允许你使用sys模块提供的各种功能，从而更好地与Python解释器和操作系统底层进行交互。通过熟练掌握sys模块的使用，可以大大提高Python开发的效率和灵活性。 sys模块 是Python的内置模块之一，用于与Python解释器和系统环境交…...
Python爬虫：XPath基本语法
XPath（XML Path Language）是一种用于在XML文档中定位元素的语言。它使用路径表达式来选择节点或节点集，类似于文件系统中的路径表达式。 不啰嗦，讲究使用，直接上案例。 导入 pip3 install lxmlfrom lxml import etr…...
UML/SysML建模工具更新情况（截至2024年1月）（1）UModel 2024
最近一段时间更新的工具有： 工具最新版本：Umple 1.33.0 更新时间：2024年1月10日 工具简介 自称“Model-Oriented Programming”，把图形和文本结合起来，支持Java、PHP和Ruby代码生成，可以在线使用…...
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…...
【MAC】Multi-Level Monte Carlo Actor-Critic阅读笔记
基本思想： 利用多层次蒙特卡洛方法（Multi-Level Monte Carlo，MLMC）和Actor-Critic算法，解决平均奖励强化学习中的快速混合问题。 快速混合？ 在强化学习中，当我们说一个策略"混合得快"…...
[GN] 设计模式—— 创建型模式
文章目录 创建型模式单例模式 -- 确保对象唯一性例子优化饿汉式懒汉式 优缺点使用场景 简单工厂模式例子：优化优缺点适用场景 工厂方法模式 -- 多态工厂的实现例子优缺点优化适用场景 抽象工厂模式 -- 产品族的创建例子优缺点适用场景 总结 创建型模式 单例模式 –…...
链表——超详细
一、无头单向非循环链表 1.结构（两个部分）： typedef int SLTDataType; typedef struct SListNode {SLTDataType data;//数据域struct SListNode* next;//指针域 }SLNode; 它只有一个数字域和一个指针域，里面数据域就是所存放的…...
＜6＞-MySQL表的增删查改
目录 一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件 三，update（更新表） 四，delete（删除表…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
如何更改默认 Crontab 编辑器 ？
在 Linux 领域中，crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用，用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益，允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...
基于PHP的连锁酒店管理系统
有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发，数据库mysql，前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...
Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？
Pod IP 的本质与特性 Pod IP 的定位 纯端点地址：Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址（如 10.244.1.2）无特殊名称：在 Kubernetes 中，它通常被称为 “Pod IP” 或 “容器 IP”生命周期：与 Pod …...
6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础
第三周 Day 3 🎯 今日目标 理解类（class）和对象（object）的关系学会定义类的属性、方法和构造函数（init）掌握对象的创建与使用初识封装、继承和多态的基本概念（预告） &a…...
【WebSocket】SpringBoot项目中使用WebSocket
1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖，添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...
macOS 终端智能代理检测
🧠 终端智能代理检测：自动判断是否需要设置代理访问 GitHub 在开发中，使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新，例如： fatal: unable to access https://github.com/ohmyzsh/oh…...
python基础语法Ⅰ
python基础语法Ⅰ 常量和表达式变量是什么变量的语法1.定义变量使用变量 变量的类型1.整数2.浮点数(小数)3.字符串4.布尔5.其他 动态类型特征注释注释是什么注释的语法1.行注释2.文档字符串 注释的规范 常量和表达式 我们可以把python当作一个计算器，来进行一些算术…...
centos挂载目录满但实际未满引发系统宕机
测试服务器应用系统突然挂了，经过排查发现是因为磁盘“满了”导致的，使用df -h查看磁盘使用情况/home目录使用率已经到了100%,但使用du -sh /home查看发现实际磁盘使用还不到1G，推测有进程正在写入或占用已删除的大文件（Linux 系统…...