【HTML】1px边框与1px分割线

对比图

  • 箭头标注的是处理过的
    在这里插入图片描述

1px分割线

  • 使用transform的scaleY进行缩小

 <div class="mini-heriz"></div><br><div style="border: solid 1px black; width: 300px;height: 1px;"></div>
<style>
.mini-heriz {width: 300px;position: relative;height: 1px;
}.mini-heriz::before{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: black;content: '';transform: scaleY(.5);
}
</style>



1px边框

  • 宽高设为父元素的200%

    • width: 200%
    • height: 200%
  • 利用伪元素beforeafter进行绘制边框

  • 使用transform: scale(0.5)缩小一半

  • 最后使用transform-origin: left top设置缩放位置

    • left x轴沿左边开始缩放
    • top y轴沿顶部缩放
 <div class="mini-border"></div><br /><div style="border: solid 1px black; width: 100px; height: 100px;border-radius: 5px;"></div><style>
.mini-border {position: relative;width: 100px;height: 100px;
}.mini-border::before {border-radius: 5px;border: solid 1px black;width: 200%;height: 200%;content: "";left: 0;top: 0;transform-origin: left top;position: absolute;transform: scale(0.5);
}
</style>

End
2024/3/12 16:56

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

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

相关文章

深入理解 MySQL 中的 CASE 语句:从基础到实战

在数据库处理中&#xff0c;条件逻辑是不可或缺的部分&#xff0c;特别是在需要根据某些条件动态改变输出结果时。MySQL 的 CASE 语句提供了一种强大的方式来实现这种逻辑&#xff0c;让你可以在 SQL 查询中包含条件分支。本文将深入探讨 CASE 语句的使用方法&#xff0c;并通过…

操作系统:进程控制(上)

目录 1.进程创建 1.1.fork()函数 1.2.写时拷贝 2.进程终止 2.1.进程的退出场景 2.1.1.退出码和错误码&#xff08;正常终止&&任务失败&#xff09; 2.1.2.异常终止 1.进程创建 1.1.fork()函数 在linux中&#xff0c;fork函数时非常重要的函数&#xff0c;它从已…

Python白练-1字符串操作示例

问1&#xff1a;请对下列字符串进行操作&#xff1a; str1 "Hello World!" print(str1) print(str1[0:-1]) print(str1[-1]) print(str1[2:5]) print(str1[2:]) print(str1*2) 参考答案请见评论区。 Python 提供了丰富的字符串操作功能&#xf…

超越传统搜索引擎:揭秘IndexTank的强大搜索引擎原理(一)

本系列文章简介&#xff1a; 本系列文章将从IndexTank的工作原理和应用领域等方面揭秘其强大的搜索引擎原理。我们将深入探讨其索引结构的构建、高效的查询处理算法以及优化策略等关键要素。此外&#xff0c;我们还将探讨IndexTank的优点和应用领域&#xff0c;包括电子商务、新…

力扣爆刷第93天之hot100五连刷51-55

力扣爆刷第93天之hot100五连刷51-55 文章目录 力扣爆刷第93天之hot100五连刷51-55一、200. 岛屿数量二、994. 腐烂的橘子三、207. 课程表四、208. 实现 Trie (前缀树)五、46. 全排列 一、200. 岛屿数量 题目链接&#xff1a;https://leetcode.cn/problems/number-of-islands/d…

tigramite教程(五)使用TIGRAMITE 进行自助聚合和链接置信度量化

使用TIGRAMITE 进行自助聚合和链接置信度量化 自助聚合&#xff08;Bagging&#xff09;和置信度估计例子数据生成模型基本的PCMCIBagged-PCMCI使用优化后的pc_alpha进行自举聚合使用优化的pc_alpha进行CMIknn的自举聚合 TIGRAMITE是一个用于时间序列分析的Python模块。它基于P…

安卓kotlin面试题 101-105

101. 简述如何在 Kotlin 中比较两个字符串?Kotlin 语言允许多种方法来检查两个字符串是否相等。 使用比较运算符 在 Kotlin 中, == 用于检查两个对象的结构相等性。如果两个对象具有相同的值,它将返回 true: fun main(args: Array) { val str1: String = "Hell…

【Spring】学习Spring框架那点小事儿

Spring作者&#xff1a;Rod Johnson Rod Johnson 是一位软件开发人员和作家&#xff0c;他在软件开发领域有着广泛的影响力。他出生于澳大利亚&#xff0c;拥有计算机科学和音乐双学位&#xff08;能写出有优雅的代码一定有艺术细胞&#xff09;。 Rod Johnson 在 2002 年出版…

【Python】python实现Apriori算法和FP-growth算法(附源代码)

使用一种你熟悉的程序设计语言&#xff0c;实现&#xff08;1&#xff09;Apriori算法和&#xff08;2&#xff09;FP-growth算法。 目录 1、Apriori算法2、F-Growth算法3、两种算法比较 1、Apriori算法 def item(dataset): # 求第一次扫描数据库后的 候选集&#xff0c;&am…

深圳服务器托管-优质的BGP机房

服务器只需要设置一个IP地址&#xff0c;最佳访问路由是由网络上的骨干路由器根据路由跳数与其它技术指标来确定的&#xff0c;不会占用服务器的任何系统资源。服务器的上行路由与下行路由都能选择最优的路径&#xff0c;所以能真正实现高速的单IP高速访问。 BGP协议本身具有冗…

PLSQL登录提示ora_12541无法识别连接符报错

tnsnames.ora文件配置时&#xff0c;有一定的格式要求&#xff0c;一般从其他地方粘贴时&#xff0c;地址端口服务名都不会有什么问题&#xff0c;这时粘贴时要注意各行的格式要求&#xff1a; <ATOMICSCHEMANAME> (DESCRIPTION (ADDRESS_LIST (ADDRESS (PROTOCOL TCP…

高可用篇_A Docker容器化技术_II Docker环境搭建和常见命令

原创作者&#xff1a;田超凡&#xff08;程序员田宝宝&#xff09; 版权所有&#xff0c;引用请注明原作者&#xff0c;严禁复制转载 Docker安装 Docker 要求 CentOS7 系统的内核版本在 3.10以上 &#xff0c;查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker 。 …

OpenCV实战--利用级联分类器检测眼睛、行人、车牌等等

1、前言 opencv 提供级联分类器除了识别人脸外,还可以检测其他的物体 级联分类器的介绍:OpenCV实战--人脸跟踪(级联分类器) 检测人脸,戴上眼镜的演示: 这里只演示几个,更多的级联分类器文件可以百度自行查看 2、眼睛跟踪 haarcascade_eye.xml 检测眼睛的级联分类器文…

C#、C++、Java、Python 选择哪个好?

作者&#xff1a;网博汇智 链接&#xff1a;https://www.zhihu.com/question/298323023/answer/2789627224 来源&#xff1a;知乎 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 一个好的程序员不能把自己绑定在一种语言上&#xff0c;不…

解决Nginx 404反向代理问题的方法

问题背景 当你在使用Nginx进行反向代理时&#xff0c;有时候会遇到404错误&#xff0c;这是因为Nginx无法找到对应的资源。这个问题通常出现在配置反向代理的过程中&#xff0c;导致用户无法正常访问所需的资源&#xff0c;给网站的稳定性和用户体验带来负面影响。 解决方法 …

复杂网络——半局部中心法

一、概述 由于最近写论文需要使用复杂网络知识中的半局部中心法&#xff0c;但是截止目前来说&#xff0c;网上几乎搜索不到有关的MATLAB程序代码&#xff0c;只有一篇用Python编写的程序&#xff0c;我的电脑中没有python&#xff0c;所以我花费一些时间&#xff0c;利用matla…

海豚调度系列之:任务类型——SPARK节点

海豚调度系列之&#xff1a;任务类型——SPARK节点 一、SPARK节点二、创建任务三、任务参数四、任务样例1.spark submit2.spark sql 五、注意事项&#xff1a; 一、SPARK节点 Spark 任务类型用于执行 Spark 应用。对于 Spark 节点&#xff0c;worker 支持两个不同类型的 spark…

53、WEB攻防——通用漏洞CRLF注入URL重定向资源处理拒绝服务

文章目录 CRLF注入原理&检测&利用URL重定向web拒绝服务 CRLF注入原理&检测&利用 URL重定向 就是url中存在urlhttps://xxx&#xff0c;重定向的页面没有限制。主要用来做钓鱼。 web拒绝服务 例如&#xff0c;图片的长宽参数由前端传入&#xff0c;恶意的数据…

分布式调用与高并发处理(二)| Dubbo

文章目录 Dubbo概念_什么是分布式系统单机架构集群架构分布式架构单机、集群和分布式的区别 Dubbo概念_什么是RPCRPC两个作用&#xff1a;常见 RPC 技术和框架&#xff1a; Dubbo概念_简介Dubbo能做什么Dubbo支持的协议 Dubbo概念_核心组件注册中心Registry服务提供者Provider服…

直播相关——声网rtc SDK

声网 SDK项目集成与api使用整理 遥想约4年前&#xff0c;也自行调研过&#xff0c;虽然最终没有在实际项目中落地。 声网Android端集成与一对一音视频功能实现 现在&#xff0c;终于要开始在项目中正式落地了&#xff0c;而声网也从原来的v3.x升级到了v4.x版本了。根据官网介绍…