【备忘】小于一像素的border

最新推荐文章于 2023-12-31 13:21:01 发布

原创最新推荐文章于 2023-12-31 13:21:01 发布 · 721 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用背景图片实现小于1px边框效果的技术。通过将特定尺寸的图片设置为元素背景，并调整其大小和位置，可以创造出视觉上的超细边框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个高为20px的仅含有1px高直线的png图片

上图border-less-than-one.png为一张高为20px，只包括一条高1px直线的图片

把她设成背景、放在容器的最底部，再压缩一下高度

background:url('../images/border-less-than-one.png') repeat-x;
background-size:auto 10px;
background-position: 0 bottom;
background-color:#ffffff;

奇迹出现了。。。小于1px的border。。。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

holyscars

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

用android studio写的一个备忘录

06-09

这个“用android studio写的一个备忘录”项目，显然是一款基于Android Studio构建的备忘录应用，旨在帮助用户记录日常生活或工作中的重要事项。下面将详细介绍Android Studio、Android开发以及备忘录应用的相关知识...

一个简单的Android备忘录.zip

02-03

在本项目"一个简单的Android备忘录.zip"中，我们主要关注的是如何使用Android Studio开发一个手机端的小型备忘录应用。这个课程设计旨在帮助初学者了解Android应用的基础架构和核心组件，如Activity、Intent、SQLite...

参与评论您还未登录，请先登录后发表或查看评论

border小于1像素

致年在学习

12-11

1164

border边框小于1

设置border线条小于1px

c_xiaomaotou的博客

08-13

8131

正常来说,border的最小宽度为1px,这种情况对于移动端来说是一个很大的问题,因为1px在手机显示确实显得有点粗;对于iOS系统它支持浮点数,可以使用rpx作为单位,可设置为1rpx,相当于0.5px,而安卓就不行了,下面说一下安卓设置细下边框对于安卓需要使用到伪元素,只需要把该伪元素添加到你想要的元素中就可以了,比如: <div class="tex...

小程序设置border 小于1rpx 的情况保证细

weixin_43077063的博客

08-27

3808

.card::after { display: flex; box-sizing: border-box; align-items: center; content: ”; position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(0.5); transform-origi...

border设置小于1px，在ios上面不显示的问题

qq_51035159的博客

12-31

1146

使用伪元素缩放，记录一下。

移动端边框1px问题

08-15

291

边框变粗的原因 > css中的1px并不等于移动设备的1px，不同手机有不同的像素密度。window对象中有一个devicePixelRatio属性，即css中的像素 / 设备的像素比之前的解决方案 1. 0.5px 通过javascript检测浏览器能否处理0.5px的边框，如果可以则给html元素添加个class if (window.devicePixelRatio &a...

毕业设计基于JavaWeb实现的一个备忘录系统项目源码.zip

06-13

毕业设计基于JavaWeb实现的一个备忘录系统项目源码。难度适中，新手自己可操作备忘录介绍后端部分基于Servlet、Jdbc实现. 前端部分基于Layui、jqury实现。一个简单的前后端分离Demo，前后端交互JSON数据格式 ...

一个简单的备忘录APP，鸿蒙平台.zip

02-07

【标题】"一个简单的备忘录APP，鸿蒙平台.zip" 涵盖了华为鸿蒙系统(HarmonyOS)的开发实践，旨在为开发者提供一个基础的备忘录应用程序的构建过程。这个项目名为“todo_harmonyOS-master”，显然是一个基于鸿蒙操作...

小于一像素的border奇迹样式

09-25

小于一像素的border，看到这句话是不是特不相信，其实这是通过css样式来实现的，下面是具体的示例，大家可以参考下

1px像素问题

布里渊区

11-04

2212

<div class="scale-1px"> 限时特惠 </div> .scale-1px{ position: relative; border:none; width:100px } .scale-1px:after{ content: ''; position: absolute; top:...

CSS 设置 border 边框不占元素宽高

zzzzls 的博客

03-16

2万+

box-sizing 用于设置 html 标签的宽度和高度是否包含 padding 和 border 的属性

css border边距在盒子内部呈现，不占用外部Px

大宅广的博客

11-14

2万+

box-sizing: border-box; border: solid 1px white; 绿色边框即为边距内部呈现效果；

vue中分割线的实现

热门推荐

zzqz的博客

08-02

3万+

项目中，需要实现分割线的效果，如图：奈何 element 中的分割线用起来报错，无奈只好自己写，很简单，先说下原理：给一个高为1像素的盒子，盒子宽度根据要求设定，再设置盒子颜色，排列方式为相对定位，盒子里设置文字给左右padding，并进行绝对定位到中间即可实现看代码： <div class="tableTitle"><span class="midText"&...

移动端如何真正实现1像素border

博客

02-03

4644

前些日子总被人问起 iOS Retina 屏，设置 1px 边框，实际显示 2px，如何解决？原来一直没在意，源于自己根本不是像素眼…… 今天仔细瞅了瞅原生实现的边框和CSS设置的边框，确实差距不小……上图是原生实现，下图是 CSS 边框，手机上对比更加明显然后，如何解决呢？搜遍整个谷歌，发现好多人早已开始研究解决方案了。到底有哪些方案，到底好不好用呢？试过才知道，把我试过的结论记录一

css实现不占大小的边框

SunShinessx的博客

05-16

5323

问题场景：点击item加边框，加打钩。出现的问题：点击之前在同一行，点击后变成两行。这里如果用border来实现边框，最后还是会出现挤下来的情况，因为border会占大小，而且这里不能用box-sizing，因为item的宽度不固定。所以用box-shadow: 0 0 0 4rpx #03A9F4 来实现。不占大小的边框。 ...

7种方法解决移动端Retina屏幕1px边框问题

周搏的博客

07-06

2646

在之前的项目中，UI告诉我说我们移动项目中的边框全部都变粗了。原谅我的近视眼，为什么我看不出什么差距了，结果UI把他的设计稿跟我的屏幕截图跟我看，居然真的不一样！！！没有办法，只有在后面的版本中去修改了，但是要改的话，需要知道是为什么。所以查了很多资料，终于搞懂了这个问题，并且总结了几种方法。造成边框变粗的原因其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由

写一个备忘录代码