ios 0.5px出现边框丢失的问题

最近在搞uniapp开发的时候,碰见设置元素1rpx边框线的时候会经常出现边框线丢失的问题,但是在谷歌上并没有出现这个问题很奇怪.

首先ui是肯定不允许这种情况出现的
其实这个也牵扯出来了一个经典的面试问题移动端1px 显示问题

因为不同的设备设备像素比是不一样的,导致渲染1px用的物理像素是不同的,导致在有些设备上看起来很粗呢效果就不好看了,

其实网上方法也很多这里只写一种,博主使用的。
就是使用伪类生成同样大小的父类元素设置1px 然后等比缩放一倍来实现

// 细边框
.b-solid {position: relative;&::after {content: " ";position: absolute;top: 0;left: 0;width: 200%;height: 200%;border: 1px solid $primary;border-radius: 4rpx;transform-origin: 0 0;transform: scale(0.5);}
}

方法不在于多在于精在于你喜欢哪个哈哈

关注我持续更新前端知识

ios 0.5px出现边框丢失的问题相关推荐

html怎么添加5px高的线,CSS 0.5px 细线边框的原理和实现方式
细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即cs ...
html怎么添加5px高的线,css给div添加0.5px的边框
具体代码实现如下: border div{ position: relative; width: 100%; background-color: #fff; } div:before{ content ...
[前端CSS高频面试题]如何画0.5px的边框线（详解）
往期css3文章详解 CSS3中最好用的布局方式--flex弹性布局(看完就会) CSS3基础属性大全 CSS3动画属性 animation详解(看完就会) CSS3 transform 2D转换之 ...
css3 使用SVG做0.5px 的边框细线
.HalfPixelLine{background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http:/ ...
div背景透明内容不透明与0.5PX边框兼容设置
1.问题:设置 border-width:0.5px; 并兼容安卓和苹果移动端. 兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同解 ...
0.5px边框，css及sass
手机上的边框,1px的宽度已经无法满足需求了,0.5px的需求应用而生. 做法: 利用伪类,做一个长宽200%,1px宽度的边框,再缩小至0.5倍. div {position: relative; ...
[转]retina屏下支持0.5px边框的情况
2014-12-31更新: 截至到IOS8.1,safari仍不支持@supports 待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新: 1. 修正dpr = ...
[css] 怎么实现移动端的边框0.5px？
[css] 怎么实现移动端的边框0.5px? 一种是通过transform中的scaleborder: 1px solid red;transform: scaleY(.5);一种是通过meta vi ...
css3实现0.5px边框、圆角渐变色边框+圆角渐变色背景
效果图 0.5px边框 0.5px边框,可以用伪元素实现,before.after都可以.移动端H5页面用的比较多. 圆角渐变色边框+圆角渐变色背景实现外部圆角边框,内部圆角渐变色背景,是用父div ...

ios 0.5px出现边框丢失的问题

ios 0.5px出现边框丢失的问题相关推荐

最新文章

热门文章