css 实现自定义虚线

news2025/1/19 18:01:34

需求:

  • ui 画的图是虚线,但是虚线很宽正常的border 参数无法做到在这里插入图片描述

进程:

  • 尝试使用 border:1px dashed

  • 发现使用这个虽然是虚线但是很短密密麻麻的 在这里插入图片描述

  • 这并不是我们想要的那就只能换方案

  • 第一个最简单,让ui 画一个图然后作为背景放在div 里面就行了

  • 但是这个方案比较费ui,还容易挨骂所以我一般践行自己动手,丰衣足食

  • background-image 可以使用 linear-gradient

  • 这个参数可以画一条线在div里面

  • 参考 background-image: 'linear-gradient(to right, #D8D8D8 0%, #D8D8D8 50%, transparent 50%)

  • 这个参数可以让你在背景上画一条线,参数 分别是从左到右,由0% 的位置开始黑色 到 50% 的位置渐变到黑色,再由 50% 的黑色渐变到 50% 的背景色

  • 原理就是渐变的差值为0 所以相当于就是有50% 的黑色线条 50% 的背景色,看起来就像是虚线里的一个横

  • 但是这样会有个问题这个横线很长,那就要配置一个 background-size

  • 参考 background-size: 12px 1px

  • 这个参数会使你的横线只有1px 宽,12px 长,但是虚线还是只有一根,或者就是一堆x y 轴上都是密密麻麻的

  • 那就要加上 background-repeat: repeat-x

  • 这个参数表示只有x 轴会有重复的显示结果看起来就是一个虚线

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2279007.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【鸿蒙】0x02-LiteOS-M基于Qemu RISC-V运行

OpenHarmony LiteOS-M基于Qemu RISC-V运行 系列文章目录更新日志OpenHarmony技术架构OH技术架构OH支持系统类型轻量系统(mini system)小型系统(small system)标准系统(standard system) 简介环境准备安装QE…

力扣动态规划-2【算法学习day.96】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向(例如想要掌握基础用法,该刷哪些题?建议灵神的题单和代码随想录)和记录自己的学习过程,我的解析也不会做的非常详细,只会提供思路和一些关…

细说STM32F407单片机电源低功耗SleepMode模式及应用示例

目录 一、STM32F4的低功耗模式 1、睡眠(Sleep)模式 2、停止(Stop)模式 3、待机(Standby)模式 二、睡眠模式 1、进入睡眠模式 2、睡眠模式的状态 3、退出睡眠模式 4、SysTick的影响 三、应用示例 1、工程配置 (1) 时钟、DEBUG、GPIO、CodeGen…

【竞技宝】LOL:ning直播再次锐评

北京时间1月18日,目前英雄联盟LPL2025正在如火如荼的进行之中,很多队伍都已经打完了新赛季的首场比赛,其中就包括AL战队,AL在休赛期进行了大幅度的人员调整,整体实力相比之前增强了不少,在16日的比赛中,AL3-0轻松击败LGD拿下了赛季开门红,而AL的打野选手tarzan在本场比赛中表现…

构建安全防线:基于视频AI的煤矿管理系统架构创新成果展示

前言 本文我将介绍一款AI产品的成果展示——“基于视频AI识别技术的煤矿安全生产管理系统”。这款产品是目前我在创业阶段和几位矿业大学的博士共同从架构设计、开发到交付的全过程中首次在博客频道发布, 我之前一直想写但没有机会来整理这套系统的架构, 因此我也特别感谢CSDN平…

QT笔记- Qt6.8.1 Android编程 添加AndroidManifest.xml文件以支持修改权限

1. 切换项目选项卡,找到构建的步骤下的最后一项构建安卓APK,展开后找到应用程序栏,点击安卓自定义中的创建模板. 2. 弹出对话框勾选图中选项后点完成 3. 回到项目,查看.pro文件,里面多了很多内容不管,在下…

STM32-笔记43-低功耗

一、什么是低功耗? 低功耗‌是指通过优化设计和采用特定的技术手段,降低电子设备在运行过程中消耗的能量,从而延长电池寿命、提高性能和减少发热。低功耗设计主要从芯片设计和系统设计两个方面进行,旨在减少所有器件的功率损耗&am…

重温STM32之环境安装

缩写 CMSIS:common microcontroller software interface standard 1,keil mdk安装 链接 Keil Product Downloads 安装好后,开始安装平台软件支持包(keil 5后不在默认支持所有的平台软件开发包,需要自行下载&#…

【三国游戏——贪心、排序】

题目 代码 #include <bits/stdc.h> using namespace std; using ll long long; const int N 1e510; int a[N], b[N], c[N]; int w[4][N]; int main() {int n;cin >> n;for(int i 1; i < n; i)cin >> a[i];for(int i 1; i < n; i)cin >> b[i…

想品客老师的第一天:值类型使用

前面两章的摘要 ECMAscript&#xff08;也就是ES&#xff09;是JavaScript的一个标准&#xff0c;就像c的c11和c99一样&#xff0c;几把的一年出一套标准 freeze()是一个对象方法&#xff0c;表示锁定、固定一个对象不可改变&#xff08;因为const对于标量不可变&#xff0c;…

leetcode刷题记录(六十七)——21. 合并两个有序链表

&#xff08;一&#xff09;问题描述 21. 合并两个有序链表 - 力扣&#xff08;LeetCode&#xff09;21. 合并两个有序链表 - 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a;[https://assets.leetcode…

学习微信小程序的下拉列表控件-picker

1、创建一个空白工程 2、index.wxml中写上picker布局&#xff1a; <!--index.wxml--> <view class"container"><picker mode"selector" range"{{array}}" bindchange"bindPickerChange"><view class"pick…

大象机器人发布首款穿戴式数据采集器myController S570,助力具身智能数据收集!

myController S570 具有较高的数据采集速度和远程控制能力&#xff0c;大大简化了人形机器人的编程。 myController S570 是一款可移动的轻量级外骨骼&#xff0c;具有 14 个关节、2 个操纵杆和 2 个按钮&#xff0c;它提供高数据采集速度&#xff0c;出色的兼容性&#xff0c…

【氮化镓】香港科技大学陈Kevin-单片集成GaN比较器

一、引言(Introduction) GaN HEMT的重要性 文章开篇便强调了氮化镓(GaN)高电子迁移率晶体管(HEMT)在下一代功率转换系统中的巨大潜力。GaN HEMT具备高开关频率、低导通电阻、高击穿电压以及宽工作温度范围等优势,使其成为功率电子领域的热门研究对象。这些特性使得GaN…

ComfyUI-PromptOptimizer:文生图提示优化节点

ComfyUI-PromptOptimizer 是 ComfyUI 的一个自定义节点&#xff0c;旨在优化文本转图像模型的提示。它将用户输入的提示转换为更详细、更多样化、更生动的描述&#xff0c;使其更适合生成高质量的图像。无需本地模型。 1、功能 提示优化&#xff1a;优化用户输入的提示以生成…

Linux-day08

第17章 大数据定制篇-shell编程 shell编程快速入门 shell变量 设置环境变量 把行号打开 set nu 位置参数变量 预定义变量 在一个脚本中执行了另外一个脚本所以卡住了 CTRLC退出 运算符 operator运算符 条件判断 流程控制 单分支多分支 case语句 for循环 反复的把取出来的i值…

ExpGCN:深度解析可解释推荐系统中的图卷积网络

一、引言 在当今信息爆炸的时代&#xff0c;推荐系统已成为电子商务和社交网络中不可或缺的工具&#xff0c;旨在为用户筛选出符合其兴趣的信息。传统的协同过滤&#xff08;CF&#xff09;技术通过挖掘用户与项目之间的交互记录来生成推荐&#xff0c;但这种方法简化了模型&a…

蓝桥杯3526 子树的大小 | 数学规律

题目传送门 这个题目是一个数学题&#xff0c;比较好的方法是从上往下寻找子树的最左和最右的结点&#xff0c;每层统计子结点数&#xff0c;到树的底部时打印结果。 如何求最左、最右的子结点呢&#xff1f; 对于第i个结点,其前面有i-1个结点,每个结点各有m个孩子,再加上1号结…

大语言模型的语境中“越狱”和思维链

大语言模型的语境中“越狱”和思维链 越狱(Jailbreaking) 含义:在大语言模型的语境中,“越狱”是指用户试图绕过语言模型的安全限制和使用规则,让模型生成违反伦理道德、包含有害内容(如暴力、歧视、恶意软件代码等)的输出。这些安全限制是由模型开发者设置的,目的是确…

解决leetcode第3418题机器人可以获得的最大金币数

3418.机器人可以获得的最大金币数 难度&#xff1a;中等 问题描述&#xff1a; 给你一个mxn的网格。一个机器人从网格的左上角(0,0)出发&#xff0c;目标是到达网格的右下角(m-1,n-1)。在任意时刻&#xff0c;机器人只能向右或向下移动。 网格中的每个单元格包含一个值coin…