移动端H5 实现0.5px边框

旧城等待， 2022-12-15 12:41 388阅读 0赞

### 此文章转载自：[https://blog.csdn.net/Love\_your\_life/article/details/80499334][https_blog.csdn.net_Love_your_life_article_details_80499334]  ###

内容亲测有效

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70][]

项目中应设计师要求，1px的边框觉得不精致。。遂要实现0.5px边框

实现方式如下：

伪类 + transform 实现

单条border样式设置：

.scale-1px{
        position: relative;
        border:none;
        }
        .scale-1px:after{
        content: '';
        position: absolute;
        bottom: 0;
        background: #000;
        width: 100%;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        }

四条boder样式设置:

.scale-1px{
        position: relative;
        margin-bottom: 20px;
        border:none;
        }
        .scale-1px:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #000;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: left top;
        transform-origin: left top;
        }

支持圆角(伪类和本体类都需要加border-radius)；

[https_blog.csdn.net_Love_your_life_article_details_80499334]: https://blog.csdn.net/Love_your_life/article/details/80499334
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70]: /images/20221123/fc4dcd943b934865bd219efadb857795.png

发表评论取消回复

表情：

评论列表（有 0 条评论，388人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 移动端 1px(线条/边框) 解决方案

> 由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px，所以在高清

港控/mmm°/ 2023年06月07日 10:42/ 0 赞/ 32 阅读

相关移动端1px边框问题

解决方案一使用rem为单位。使用js获取dpr值动态计算视口缩放，设置viewport content属性。计算得到缩放比后，应该对应给html的

￡神魔★判官ぃ/ 2023年03月01日 09:19/ 0 赞/ 20 阅读

相关 h5移动端适配(px-＞vw/vh)

vw适配 1.browserslistrc文件删除 not dead 2. 安装依赖 cnpm i -S postcss-px-to-viewport

傷城~/ 2022年12月26日 14:26/ 0 赞/ 338 阅读

相关移动端H5 实现0.5px边框

此文章转载自：[https://blog.csdn.net/Love\_your\_life/article/details/80499334][https_blog.csd

旧城等待，/ 2022年12月15日 12:41/ 0 赞/ 389 阅读

相关 h5页面自适应移动端 px2rem

<script> resize() window.onresize = function() { res

超、凢脫俗/ 2022年10月01日 13:57/ 0 赞/ 396 阅读

相关移动端，h5页面1px 1像素边框过粗解决方案

移动端，h5页面1px 1像素边框过粗解决方案参考文章： [（1）移动端，h5页面1px 1像素边框过粗解决方案][1_h5_1px 1] （2）https://www

怼烎@/ 2022年09月13日 06:28/ 0 赞/ 292 阅读

相关实现移动端1px边框

最近学了一下vue的实战课程，学习到了其中的一个页面设计技巧，觉得深有感触，于是便写个博客记录下来，以便下次查阅项目中是通过vue+stylus来实现的，那么首先需要说一下

心已赠人/ 2022年05月30日 00:12/ 0 赞/ 339 阅读

相关移动端1px边框

移动端1px边框 /高清屏 1px border/ .border-1-px, /1px 边框/ .border-1-px-radius, /1p

雨点打透心脏的1/2处/ 2022年01月29日 03:13/ 0 赞/ 322 阅读

相关移动端小于1px边框

.border-top{position: relative;border-top: none !important;} .border-top:after {

约定不等于承诺〃/ 2021年12月21日 17:23/ 0 赞/ 436 阅读

相关移动端h5截屏实现

在实际的开发中，我们不难遇到移动端h5的开发，各种手机的兼容，安卓与ios，华为与小米，让我们头痛不已，在移动端海报截屏之中，网上有很多的案例，但是要么不稳定，要么需要的插件太

悠悠/ 2021年09月24日 12:54/ 0 赞/ 565 阅读