css：移动端实现1px、0.5px的细线

实现效果

在线体验: https://mouday.github.io/front-end-demo/1px.html

实现代码

<body><style>* {margin: 0;padding: 0;}body {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;}.margin-top--20 {margin-top: 20px;}.box {width: 500px;height: 100px;box-sizing: border-box;}/* 1px border */.border--1 {border: 1px solid gray;}.border--0_5 {position: relative;}/* 通过伪元素实现 0.5px border */.border--0_5::after {position: absolute;content: "";/* 为了与原元素等大 */box-sizing: border-box;left: 0;top: 0;width: 200%;height: 200%;border: 1px solid gray;transform: scale(0.5);transform-origin: 0 0;}.line {width: 500px;}/* 实现 1px 细线 */.line--1 {height: 1px;background: #b3b4b8;}.line--0_5 {position: relative;}/* 通过伪元素实现 0.5px 细线 */.line--0_5::after {content: "";position: absolute;top: 0;left: 0;width: 200%;height: 1px;background: #b3b4b8;transform: scale(0.5);transform-origin: 0 0;}/* dpr适配可以这样写 */@media (-webkit-min-device-pixel-ratio: 2) {.line--0_5::after {height: 1px;transform: scale(0.5);transform-origin: 0 0;}}@media (-webkit-min-device-pixel-ratio: 3) {.line--0_5::after {height: 1px;transform: scale(0.333);transform-origin: 0 0;}}</style><h1>1px border</h1><div class="box border--1"></div><h1 class="margin-top--20">0.5px border</h1><div class="box border--0_5"></div><h1 class="margin-top--20">1px line</h1><div class="line line--1"></div><h1 class="margin-top--20">0.5px line</h1><div class="line line--0_5"></div></body>

参考
为什么会存在 1px 问题？怎么解决？
web前端入门到实战：css3属性transform-origin讲解

css：移动端实现1px、0.5px的细线相关推荐

[css] 怎么实现移动端的边框0.5px？
[css] 怎么实现移动端的边框0.5px? 一种是通过transform中的scaleborder: 1px solid red;transform: scaleY(.5);一种是通过meta vi ...
使用css3做0.5px的细线
Webapp中的CSS3实现 0.5px的细线感觉很长时间没写过博客了,最近生活还算稳定,过得较为充实,所以又要开始写写东西了,一个是为了做些记录,是怕自己某一天,忘记了,回头翻翻博客,就会再次的拾 ...
移动端页面0.5px border的实现
移动端上经常发现1px边框异常的粗,因此,决定用伪类配合css3来实现0.5px边框代码如下: 1 <!doctype html> 2 <html lang="en&qu ...
html5给div设置单边界,纯CSS实现border的0.5px设置
移动开发现在占据着越来越大的前端开发比例,所以对于移动端WEB页的要求也越来的越多,比如很多的H5页面,在设计出来时,看起来更像是一个原生的APP页面,而我这里想说的一个点就是,在H5页面中,关于分隔 ...
解决CSS移动端1px边框问题
移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. < ...
html怎么添加5px高的线,CSS 0.5px 细线边框的原理和实现方式
细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即cs ...
[css] 移动端1px像素的问题及解决方案是什么？
[css] 移动端1px像素的问题及解决方案是什么? viewport结合rem解决像素比问题比如在devicePixelRatio=2设置meta <meta name="view ...
html怎么添加5px高的线,css给div添加0.5px的边框
具体代码实现如下: border div{ position: relative; width: 100%; background-color: #fff; } div:before{ content ...
CSS实现0.5px的线 0.5rpxborder边框
1.0.5px的线核心代码就是通过transfrom的scaleY属性,溢出隐藏掉就可以了 // html <div class="line"></div> ...

css：移动端实现1px、0.5px的细线

css：移动端实现1px、0.5px的细线相关推荐

最新文章

热门文章