css3实现0.5px边框
效果图
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css3实现0.5px边框</title><style>h5 {margin: 0;padding: 0;text-align: center;margin: 15px 0;}.group {display: flex;justify-content: center;align-items: center;}.item {width: 120px;height: 80px;background-color: rgba(238, 238, 238,.6);margin-right: 10px;box-sizing: border-box;}.item.top {border-top: 1px solid #e95325;}.item.right {border-right: 1px solid #e95325;}.item.bottom {border-bottom: 1px solid #e95325;}.item.left {border-left: 1px solid #e95325;}.item.all {border: 1px solid #e95325;}/* 0.5像素的 分割线 */.hairline,.hairline-top,.hairline-right,.hairline-bottom,.hairline-left {position: relative;}.hairline::after,.hairline-top::after,.hairline-right::after,.hairline-bottom::after,.hairline-left::after {position: absolute;top: -50%;right: -50%;bottom: -50%;left: -50%;content: " ";pointer-events: none;border: 0 solid #e95325;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transform: scale(0.5);-moz-transform: scale(0.5);transform: scale(0.5);}.hairline::after {border-width: 1px;}.hairline-top::after {border-top-width: 1px;}.hairline-right::after {border-right-width: 1px;}.hairline-bottom::after {border-bottom-width: 1px;}.hairline-left::after {border-left-width: 1px;}</style>
</head><body><h5>上边框</h5><div class="group"><div class="item hairline-top"></div><div class="item top"></div></div><h5>右边框</h5><div class="group"><div class="item hairline-right"></div><div class="item right"></div></div><h5>下边框</h5><div class="group"><div class="item hairline-bottom"></div><div class="item bottom"></div></div><h5>左边框</h5><div class="group"><div class="item hairline-left"></div><div class="item left"></div></div><h5>四边框</h5><div class="group"><div class="item hairline"></div><div class="item all"></div></div>
</body></html>
相关文章：
css3实现0.5px边框
效果图 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>css3实现0.5px边框</title><s…...
U-Net网络
U-Net网络 一、基本架构 各个箭头的解释： conv 3 * 3, ReLU：表示通过一个3 * 3的卷积层，并且该层自动附带一个非线性激活层（ReLu）copy and crop：表示进行裁剪然后再进行拼接（在channel的维度上…...
不拍视频，不直播怎么在视频号卖货赚钱？开一个它就好了！
大家好，我是电商糖果 视频号这两年看着抖音卖货的热度越来越高，也想挤进电商圈。 于是它模仿抖音推出了自己的电商平台——视频号小店。 只要商家入驻视频号小店，就可以在视频号售卖商品。 具体怎么操作呢，需要拍视频…...
【vue-5】双向数据绑定v-model及修饰符
单向数据绑定：当数据发生改变时，视图会自动更新，但当用户手动更改input的值，数据不会自动更新； 双向数据绑定：当数据发生改变时，视图会自动更新，但当用户手动更改input的值…...
[STM32-HAL库]AS608-指纹识别模块-STM32CUBEMX开发-HAL库开发系列-主控STM32F103C8T6
目录 一、前言 二、详细步骤 1.光学指纹模块 2.配置STM32CUBEMX 3.程序设计 3.1 输出重定向 3.2 导入AS608库 3.3 更改端口宏定义 3.4 添加中断处理部分 3.5 初始化AS608 3.6 函数总览 3.7 录入指纹 3.8 验证指纹 3.9 删除指纹 3.10 清空指纹库 三、总结及资源 一、前言 …...
【java程序设计期末复习】chapter4 类和对象
类和对象 编程语言的几个发展阶段 （1）面向机器语言 计算机处理信息的早期语言是所谓的机器语言，使用机器语言进行程序设计需要面向机器来编写代码，即需要针对不同的机器编写诸如0101 1100这样的指令序列。 （2&#x…...
ios：Command PhaseScriptExecution failed with a nonzero exit code
问题 使用 xcode 跑项目真机调试的时候，一直报错 Command PhaseScriptExecution failed with a nonzero exit code。 解决 最终靠以下方法解决 删除Podfile.lock文件删除Pods文件删除.xcworkspace文件Pod installCommandShiftK 清理一下缓存 亲测有效...
《拯救大学生课设不挂科第四期之蓝桥杯是什么？我是否要参加蓝桥杯？选择何种语言？如何科学备赛？方法思维教程》【官方笔记】
背景： 有些同学在大一或者大二可能会被老师建议参加蓝桥杯，本视频和文章主要是以一个过来人的身份来给与大家一些思路。 比如蓝桥杯是什么？我是否要参加蓝桥杯？参加蓝桥杯该选择何种语言？如何科学备赛？等…...
数据挖掘案例-航空公司客户价值分析
文章目录 1. 案例背景2. 分析方法与过程2.1 分析流程步骤2.2 分析过程1. 数据探索分析2. 描述性统计分析3. 分布分析1.客户基本信息分布分析2. 客户乘机信息分布分析3. 客户积分信息分布分析 4. 相关性分析 3. 数据预处理3.1 数据清洗3.2 属性约束3. 3 数据转换 4. 模型构建4. …...
决策树与机器学习实战【代码为主】
文章目录 🛴🛴引言🛴🛴决策树使用案例🛴🛴numpy库生成模拟数据案例🛴🛴决策树回归问题🛴🛴决策树多分类问题 🛴🛴引言 决策树是一种经…...
从感知机到神经网络
感知机 一、感知机是什么二、用感知机搭建简单逻辑电路2.1 与门2.2 与非门2.3 或门 三、感知机的局限性3.1 异或门3.2 线性和非线性 四、多层感知机4.1 已有门电路的组合4.2 Python异或门的实现 五、感知机模型5.1 感知机模型5.2 感知机损失函数5.3 感知机学习算法 六、感知机原…...
【HMGD】STM32/GD32 I2C DMA 主从通信
STM32 I2C配置 主机配置 主机只要配置速度就行 从机配置 从机配置相同速度，可以设置第二地址 因为我的板子上面已经有了上拉电阻，所以可以直接通信 STM32 I2C DMA 定长主从通信代码示例 int state 0; static uint8_t I2C_recvBuf[10] {0}; stat…...
leecode 226 翻转二叉树、101 对称二叉树、104 二叉树的最大深度
leecode 226 翻转二叉树、101 对称二叉树、104 二叉树的最大深度 leecode 226 翻转二叉树 题目链接 ：https://leetcode.cn/problems/invert-binary-tree/description/ 题目 给你一棵二叉树的根节点 root ，翻转这棵二叉树，并返回其根节点。…...
Redux基础
简介 状态管理工具，集中式管理react、vue、angular等应用中多个组件的状态，是一个库,使用之后可以清晰的知道应用里发生了什么以及数据是如何修改，如何更新的 在项目中添加 Redux 并不是必须的,根据项目需求选择是否引入 Redux 三个原则 …...
国外目标公司的任何一个联系人也许都有意义
我们说跟进一个项目，最好能够联系上拥有决策权的人，不然中间隔着几重关系，所有的更新都需要层层审批申报，特别麻烦，总是要等，也许等到最后就是一场空。如果能够直接和老板或者是拍板的人沟通，则…...
因为本地证书太旧或不全导致的 HTTPS 访问失败问题20240520
因为本地证书太旧或不全导致的 HTTPS 访问失败问题 在生产环境中，我们经常需要使用 curl 命令来测试和调试 HTTPS URL。然而，最近我遇到了一个棘手的问题：在测试环境中使用 curl 可以正常访问某个 URL，但在生产环境中却遇到了 SS…...
Lua获取表的长度
1.代码 -- 创建一个表并添加一些元素 local myTable {10, 20, 30, 40}-- 打印表的长度 print(#myTable) -- 输出 4，因为表中有 4 个元素-- 使用 # 来遍历表中的所有元素 for i 1, #myTable doprint(myTable[i]) end -- 这将依次打印 10, 20, 30, 40...
python九九乘法表的打印思考及实现
新书上架~👇全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我👆，收藏下次不迷路┗|｀O′|┛ 嗷~~ 目录 一、问题引入 九九乘法表的显示需求 二、问题分析 嵌套循环的概念 屏幕宽度与换行的考虑…...
2.Spring中用到的设计模式
Spring框架中使用了多种设计模式来构建其强大且灵活的功能，这里举例说明Spring中的一些功能使用到的设计模式。 工厂模式：Spring容器本质是一个大工厂，使用工厂模式通过BeanFactory和ApplicationContext这两个核心接口来创建和管理bean对象。…...
.NET调用阿里云人脸核身服务端 (ExecuteServerSideVerification)简易流程保姆级教学
需要注意的是，以下内容仅限基础调用 功能说明 该功能是输入核验人的姓名和身份证以及人脸照片，去阿里库里面匹配，3个信息是否一致，一致则验证通过，需要注意的是，人脸有遮挡，或者刘海࿰…...
【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后，分别用…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...
React Native 开发环境搭建（全平台详解）
React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...
《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》
引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...
屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！
5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。 项目投运后，每年可节约标煤3670…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
)
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件，所以得把软件用docker打包起来，大部分功能都没问题，出了一个奇怪的事情。同样的代码，在本机上用vscode可以运行起来，但是打包之后在docker里出现了问题。使用的是dialog组件，…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI，使用客户端或是内部自己搭建集成大模型的终端，加速与大型语言模型（LLM）的结合，同时使用检索增强生成（Retrieval Augmented Generation &#…...
【网络安全】开源系统getshell漏洞挖掘
审计过程： 在入口文件admin/index.php中： 用户可以通过m,c,a等参数控制加载的文件和方法，在app/system/entrance.php中存在重点代码： 当M_TYPE system并且M_MODULE include时，会设置常量PATH_OWN_FILE为PATH_APP.M_T…...