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

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

news 2025/9/12 6:41:41

一、前言

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

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/9/4 8:47:06

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/9/6 22:07:42

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/9/11 12:55:04

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/8/18 23:22:02

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/9/10 21:40:39

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/7/26 12:16:34

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2025/9/2 17:47:48

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/9/2 8:07:37

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2025/9/7 3:22:38

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2025/9/10 3:34:26