巧用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. 小记:音频格式转化ByPython(下)

    上文中我们已经大致明白了pydub库的使用方法,今天的目标是写个爬虫爬取歌曲信息. 关于网络爬虫,Python的标准库里是有相应的包的,可以直接打开:https://docs.python.org/z ...

  2. Leaflet:Map类属性及方法

    1.初始化 L.map(<String> id , options ?) //用地图div的id创建 L.map(<HTMLElement>el , options?) //用 ...

  3. 洛谷 简单字符串 'P1055ISBN号码' 问题

    题目描述如下: 知识点①:char数组与int型数字进行运算时,需要将 char[i]-'0' .比如 char c[5]; int i; for(i=0;i<5;i++) scanf(&quo ...

  4. JZ-028-数组中出现次数超过一半的数字

    数组中出现次数超过一半的数字 题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超 ...

  5. Web端网站兼容性测试如何进行?来看看浏览器的兼容性测试要点

    软件兼容性测试工作的目标是保证软件按照用户期望的方式进行交互.随着用户对来自各种类型软件之间共享数据能力和充分利用空间同时执行多个程序能力的要求,测试软件之间能否协作变得越来越重要. 平台的兼容性,包 ...

  6. VS Code远程链接报错Could not establish connection to “hz.matpool.com”

    VS Code远程链接报错Could not establish connection to "hz-t2.matpool.com" 输出的部分内容 安装Git git for w ...

  7. 痞子衡嵌入式:恩智浦i.MX RTxxx系列MCU启动那些事(7)- 从SD/eMMC启动

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MXRTxxx系列MCU的SD/eMMC卡启动. 关于 i.MXRT 启动设备,痞子衡之前写过很多篇文章,都是关于串并行 NO ...

  8. MySQL-DB-封装-简易版

    <?php class DB{ private $link; public function __construct($host,$user,$password,$dbname,$port) { ...

  9. CF1392F题解

    首先题意很明显就不说了吧www 先说一下做这道题的经历 昨天下午和 blw 一起去食堂吃饭,和他产生了一点儿冲突,于是我考了一下他 P1119 (就是那道 Floyd),他很快做出来了,于是考了我这道 ...

  10. linux指令_张三

    1.基础指令语法 ls (路径) 含义:列出当前工作目录下的所有文件/文件夹的名称 pwd(printworkingdirectory,打印当前工作目录) cd (路径)       作用:用于切换当 ...