移动端H5 实现0.5px边框

旧城等待， 2022-12-15 12:41 277阅读 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 条评论，277人围观）

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

相关阅读

相关 css实现0.5px的边框

三种方法 1. 利用背景图片渐变透明：（设高为1px 宽自定线性渐变到透明） height:1px; backgroung-image: line

骑猪看日落/ 2023年06月06日 08:24/ 0 赞/ 8 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关实现移动端1px边框

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

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

相关移动端1px边框

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

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

相关移动端之1px实现

说明当我们在css里写 border: 1px solid \000的时候，用户会觉得边线依然很粗不美观。如何实现比1px更细的边线呢？下面列举了几种方案。问题根

痛定思痛。/ 2022年01月12日 15:13/ 0 赞/ 297 阅读

相关移动端小于1px边框

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

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

相关移动端h5截屏实现

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

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