巧用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;
}

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

  1. 微信移动端web页面调试小技巧

    技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客  http://lizhug.com/mymajor/微信移动端web页面调试小技巧

  2. 源码推荐:移动端商城(微信小程序源代码) WebView离线缓存

    移动端商城(微信小程序源代码)(上传者:腾讯攻城师jack) 功能包括:商品橱窗,商品搜索,购物车,结账等功能. TableView嵌套webView自适应高度(上传者:linlinchen) tab ...

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

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

  4. 移动端 CSS 1px 问题及解决方案

    移动端 CSS 1px 问题及解决方案 viewport & transfrom: scale viewport 的 initial-scale 设为 1 UI 设计稿用rem 和 trans ...

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

    摘自:http://blog.sina.com.cn/s/blog_ae809a730102vrx8.html 第一种方法: 1.将table的属性设置为:BORDER=0 .cellspacing= ...

  6. border-1px的实现(stylus)如何在移动端设置1px的border

    在这里我只介绍下边框的实现: 当样式像素一定时,因手机有320px,640px等.各自的缩放比差异,所以设备显示像素就会有1Npx,2Npx.为保设计稿还原度,解决就是用media + scale. ...

  7. 移动端的1px边框问题

    最近在做一个移动端项目,涉及到1像素问题 其实质就是移动端的css里写1px,看起来比1px粗,这就是物理像素和逻辑像素的区别.物理像素和逻辑像素之间存在一个比例关系,在Javascript中可以用w ...

  8. 在移动端实现1px的边框

    由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点 所以 border: 1px 在移动端会渲染为 2px 的边框 与设计图产 ...

  9. 移动端实1px细线方法

    前言 在移动端中,宽度100%,1px的线看起来要比pc端中宽度100%,1px的线粗, 那是因为css中的1px并不等于移动设备(物理像素)的1px.物理像素显示是1个像素代表2个像素,所以出现为2 ...

随机推荐

  1. JSP文件的上传

    JSP 文件上传 JSP 可以与 HTML form 标签一起使用,来允许用户上传文件到服务器.上传的文件可以是文本文件或图像文件或任何文档. 本章节我们使用 Servlet 来处理文件上传,使用到的 ...

  2. Qt:QDateTime

    0.说明 提供时间日期的表达和相关函数. QDateTime通过日期+时间来构造一个日期时间.它综合了QDate和QTime的所有特性. 它可以通过系统时钟来获取当前DateTime.它还提供了比较时 ...

  3. matplotlib补充知识及数据清理方法

    今日内容概要 数据操作 数据清洗理论 数据清洗实操 数据操作 read_csv read_excel read_hdf read_html read_json read_msgpack read_sq ...

  4. 【转载】SQL实例大全

    from:http://blog.csdn.net/basycia/article/details/52134279 OR from:http://www.cnblogs.com/yubinfeng/ ...

  5. Sublime Text3中文环境设置

    Sublime Text3中文环境设置 1.首先打开安装好的的Sublime软件,选择Preferences下面的Package Contorol选项出现弹窗方框 2.在弹窗输入install pac ...

  6. 被广泛使用的OAuth2.0的密码模式已经废了,放弃吧

    最近一直有同学在问,OAuth2密码模式为啥Spring Security还没有实现,就连新的Spring Authorization Server也没有这个玩意儿. 其实这里可以告诉大家,OAuth ...

  7. LGP4916题解

    第一眼,Burnside 直接丢上去啊. 设 \(f(n,m)\) 是有 \(n-m\) 个白色珠子和 \(m\) 个白色珠子的满足题意的环的个数,容易得到答案是: \[\sum_{d|n,d|m}f ...

  8. C#+SQL Server的数据库管理系统常用的代码

    数据库管理系统 数据库管理系统(Database Management System)是一种操纵和管理数据库的大型软件,用于建立.使用和维护数据库,简称DBMS.它对数据库进行统一的管理和控制,以保证 ...

  9. 基于EMR离线数据分析-反馈有礼

    "云上漫步"第三期-反馈有礼 参与体验产品,提交反馈,就有机会获得定制背包,T恤,超萌虎年鼠标垫,以及5到100元阿里云通用代金券~ 反馈地址: https://developer ...

  10. [SPDK/NVMe存储技术分析]013 - libibverbs API应用案例分析

    本文是对论文Dissecting a Small InfiniBand Application Using the Verbs API所做的中英文对照翻译 Dissecting a Small Inf ...