【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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux编程4.2 网络编程-协议

1、为什么要有协议&#xff1f; 计算机网络中实现通信必须有一些约定&#xff0c;如对速率、传输代码、代码结构、传输控制步骤和出错控制等约定&#xff0c;这些约定即被称为通信协议。在两个节点之间要成功地进得通信&#xff0c;两个节点之间必须约定使用共同的“语言”&am…

MySQL用法---MySQL Workbench创建数据库和表

1. 连接数据库 打开软件&#xff0c;点击左下角卡片&#xff0c;输入设置的数据库密码&#xff0c;勾选单选框 2. 了解主页面的组成部分 3. 创建数据库 先点击工具栏的创建按钮 再输入数据库名称 点击 Apply 创建 4. 创建数据表 展开数据库&#xff0c;在Tables上右键&…

如何在WordPress网站上设置多语言展示

在今天的全球化世界中&#xff0c;拥有多语言网站对于吸引更广泛的受众至关重要。前不就我们遇到Hostease的客户咨询我们的在线客服&#xff0c;他想要对他的wordpress网站支持多语言。我们提供给客户可以尝试以下的插件来支持多语言。 在本教程中&#xff0c;我们将逐步介绍如…

cpp qt 一个奇怪的bug

今天在用cpp qt的时候发现了一个奇怪的东西 这是我的源代码 #include "mywidget.h" #include <QPushButton>myWidget::myWidget(QWidget *parent): QWidget(parent) {QPushButton * btn1 new QPushButton;btn1->show();btn1->setParent(this);btn1-&g…

冥想与AI:打造定制的放松体验

如今&#xff0c;在浏览网页或社交网络时&#xff0c;您似乎很难对一条条心理健康信息无动于衷。遇到这种情况的可不只是您。当今不断变化的时代给人们平添压力&#xff0c;企业纷纷利用智能技术满足人们的减压需求&#xff0c;让人们的生活多一些平和从容。 冥想就是一种练习呼…

低代码开发能否降低程序员门槛?技能需求分析与优势评估揭秘!

一&#xff0e;什么是低代码开发平台 低代码开发平台和零代码开发平台是近几年时兴的一种新的程序开发方法。该模式的特征是可以使用用户界面、拖拽操作等方式快速构建应用软件软件&#xff0c;从而减少开发者的学习标准&#xff0c;使每个人都能变成开发者。 但它仍然是基于…

别再写传统简历了!AI简历5个超实用的功能,助你求职一臂之力(强烈建议收藏)

你们在制作简历时,是不是基本只关注两件事:简历模板,还有基本信息的填写。 当你再次坐下来更新你的简历时,可能会发现自己不自觉地选择了那个“看起来最好看的模板”,填写基本信息,却没有深入思考如何使简历更具吸引力。这其实是一个普遍现象:许多求职者仍停留在传统简历…

在使用qml的qmldir文件创建常用组件报错unknow component

解决方法&#xff1a;Qt Creator中的工具-->QML/JS-->重置代码模型 参考博文:QML自定义模块及qmldir的使用_同一资源文件目录下的qml模块使用-CSDN博客 不一样的地方是我给我的文件起了别名 以及我的qrc文件路径有前缀/qml 总体操作&#xff1a; 1.使用模块中的组件时…

ChatGPT提问技巧:可解释的软提示

ChatGPT提问技巧&#xff1a;可解释的软提示 可解释的软提示是一种既能控制模型生成的文本&#xff0c;又能为模型提供一定灵活性的技术。 具体做法是为模型提供一组受控输入和一些有关所需输出的附加信息。这种技术可以使生成的文本更具可解释性和可控性。 提示示例及其公式…

Mysql 学习(十七)事务隔离级别和MVCC

前提准备 首先创建一个表&#xff1a; CREATE TABLE hero (number INT,name VARCHAR(100),country varchar(100),PRIMARY KEY (number) ) EngineInnoDB CHARSETutf8;INSERT INTO hero VALUES(1, 刘备, 蜀);事务隔离级别 mysql 是一个 客户端 和 服务器架构的软件&#xff0c…

【Linux操作系统】:Linux进程概念(2)

一、Z(zombie)-僵尸进程 1.僵尸进程概念 故事 张三每天都有跑步的习惯&#xff0c;这一天他和往常一样跑步&#xff0c;跑了两三圈&#xff0c;突然跑在它前面的一个人倒在地上不动了&#xff0c;作为热心市民张三赶紧报警并且拨打120。很快120就来了&#xff0c;但是没过几分…

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

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

摄像机内存卡删除的视频如何恢复?恢复指南来袭

在现代社会&#xff0c;摄像机已成为记录生活、工作和学习的重要设备。然而&#xff0c;随着使用频率的增加&#xff0c;误删或意外丢失视频的情况也时有发生。面对这样的情况&#xff0c;许多用户可能会感到无助和困惑。那么&#xff0c;摄像机内存卡删除的视频真的无法恢复吗…

X小蓝鸟,已破!支持批量下载且速度飞快

从马斯克把小蓝鸟改名之后&#xff0c;最大的感觉就是域名更好记了&#xff0c;对于软件爱好者来说&#xff0c;可以关注软件最新消息&#xff0c;许多软件开发者都是在上面更新动态。 本期给大家分享一款可以下载X上的图片/视频工具X-Spider&#xff0c;它的特点是开源免费&am…

愿原力与您同在:电影魔术背后的AI

在《星球大战》系列影视作品的经典配乐中&#xff0c;无论您喜欢《酒吧乐队》还是喜欢《帝国进行曲》&#xff0c;我们都想说“愿原力与您同在”。5月4日“星战日”是个非正式节日&#xff0c;旨在纪念《星球大战》系列影视作品留给我们的遗产及其对现代电影制作不可磨灭的影响…

使用webpack打包ts代码

通常情况下&#xff0c;实际开发中需要使用构建工具对代码进行打包&#xff0c;TS也可以结合构建工具进行使用&#xff0c;以webpack为例&#xff0c;介绍如何结合构建工具使用TS。 基本功能实现步骤&#xff1a; 项目初始化&#xff0c;生成package.json&#xff1a;npm ini…

汉诺塔问题代码写法的详细解析

汉诺塔游戏规则&#xff1a; 规则&#xff1a; 汉诺塔问题是一个经典的问题。汉诺塔&#xff08;Hanoi Tower&#xff09;&#xff0c;又称河内塔&#xff0c;源于印度一个古老传说。大梵天创造世界的时候做了三根金刚石柱子&#xff0c;在一根柱子上从下往上按照大小顺序摞着…

自动化运维工具 ---------------Ansible

一、Ansible 发展史及功能 作者&#xff1a;Michael DeHaan&#xff08; Cobbler pxe kikstar 与 Func 作者&#xff09;ansible 的名称来自科幻小说《安德的游戏》中跨越时空的即时通信工具&#xff0c;使用它可以在相距数光年的距离&#xff0c;远程实时控制前线的舰队战斗2…

Linux:好用的Linux指令

进程的Linux指令 1.查看进程信息 ​​​​ps ajx | head -1 && ps ajx | grep 进程名创建一个进程后输入上述代码&#xff0c;会打印进程信息&#xff0c;当我们在code.exe中写入打印pid&#xff0c;ppid&#xff0c;这里也和进程信息一致。 while :; do ps ajx | he…

探索:C++继承中虚表与虚基表的内存存储

探讨&#xff1a;菱形虚拟继承的虚基表和虚表 在继承和多态里&#xff0c;总是能听到虚表、虚基表这样的词汇&#xff0c;没有洞悉其根本的人很容易将它们混淆&#xff0c;因此&#xff0c;我们对这两个“虚”“表”进行实践&#xff0c;来更好地理解它们。 通俗些说&#xf…