移动端比1px还小的border

巧用border

在移动端 经常出现border,细边框
但有的时候 产品大大1px甚至乎会觉得不够细
那么要如何写出比1px还要小的border
下面是代码 希望对大家有所帮助


.thinner-border {
    position: relative;
    width: 1px;
    margin:14px 0;
    height: 20px;
}
.thinner-border:after {
    content: ‘‘;
    position: absolute;
    width: 500%;
    height: 500%;
    border: 1px solid #ffd000;
    transform-origin: 0 0;
    transform: scale(0.2, 0.2);
    box-sizing: border-box;
}

原文地址:https://www.cnblogs.com/10manongit/p/12216074.html

时间: 2024-10-15 10:04:56

移动端比1px还小的border的相关文章

img 标签注意 默认img标签,有一个1px的边框 img{ border: 0; }

默认img标签,有一个1px的边框 img{ border: 0; } 原文地址:https://www.cnblogs.com/mingerlcm/p/9138079.html

[转]HTML中表格table边框border(1px还嫌粗)的解决方案:

摘自:http://blog.sina.com.cn/s/blog_ae809a730102vrx8.html 第一种方法: 1.将table的属性设置为:BORDER=0 .cellspacing=1 : 2.设置table的背景色为即你要设置的table的边框颜色: 3.设置所有td背景色为#ffffff白色: 这样,就大功告成了. 第二种方法: 1.设置BORDER=0 : 2.再通过CSS,给Table加上1px的border-top,border-left: 3.然后再设置所有的td的

备:移动端开发资源和小技巧

(在github上看到的,转摘而来,如果有版权问题请联系我[email protected]) mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 移动端统计 (from BiosSun) 可基于下方所列出的统计数据来决定您要兼容的设备及浏览器. 百度移动统计 友盟指数 CNZZ 桌面及移动端浏览器统计 全球移动端浏览器统计 工具类网站 HTML5

大端与小端,大尾与小尾,高尾端与低尾端,主机字节序与网络字节序

概念剖析 一时记忆与理解大端.小端的概念很容易,但时间一长,对于相似的概念人类的记忆向来是模糊的,甚至是换位的.所以除非你的记忆非常牢靠,否则借助大端和小端这样的名字,你很难将概念与内容联系紧密. 也有文章提到用大尾与小尾的概念,个人觉得这个概念还是没有解决存储概念中的基本问题,大与小还是没有脱离以前的概念,但是引入了尾的概念,已经比大端与小端要更清晰一点. 目前对于记忆大小端,我觉得这篇文章中提到的高尾端/低尾端名词记忆方法比较科学.形象.实话说,当时计算机科学著作翻译Big Endian与S

移动端的1px边框问题

最近在做一个移动端项目,涉及到1像素问题 其实质就是移动端的css里写1px,看起来比1px粗,这就是物理像素和逻辑像素的区别.物理像素和逻辑像素之间存在一个比例关系,在Javascript中可以用window.devicePixelRatio来获取,也可以用媒体查询的-webkit-min-device-pixel-ratio来获取,具体的比例差距由设备决定 如何解决这个问题才是重点,下面集中提出解决方案: 1.媒体查询利用设备像素比缩放,设置小数像素 css可以写成这样: .border{b

处理移动端边框1px问题

为什么在移动端会看到边框1px的线比较粗,原因不多说,直接贴出解决的代码 <div class="list"> <li>789797879798</li> <li>13213312</li> <li>13213312</li> </div> <style> .list li{line-height: 40px; position: relative;} .list li:afte

移动端边框1px的实现

查看京东的移动端1px实现原理,用的是:after和css3的scale(0.5)缩放. border-right fr:after{ height:100%; content:' '; width:1px; border-right:1px solid #f0f0f0; position:absolute; top:0; right:-1px; transform:scaleX(0.5); -webkit-transform:scaleX(0.5); z-index:10; } border-

在服务端处理同步发送小消息的性能上Kafka&gt;RocketMQ&gt;RabbitMQ

在发送小消息的场景中,三个消息中间件的表现区分明显: Kafka的吞吐量高达17.3w/s,远超其他两个产品.这主要取决于它的队列模式保证了写磁盘的过程是线性IO.此时broker磁盘IO已达瓶颈. RocketMQ也表现不俗,吞吐量在11.6w/s,磁盘IO %util已接近100%.RocketMQ的消息写入内存后即返回ack,由单独的线程专门做刷盘的操作,所有的消息均是顺序写文件. RabbitMQ的吞吐量5.95w/s,CPU资源消耗较高.它支持AMQP协议,实现非常重量级,为了保证消息

解决移动端上1px的问题

一.伪类 + transform 基于 media查询判断不同的设备像素比对线条进行缩放: .border_1px:before{ content: ''; position: absolute; top: 0; height: 1px; width: 100%; background-color: #000; transform-origin: 50% 0%; } @media only screen and (-webkit-min-device-pixel-ratio:2){ .borde