巧用border

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


  1. .thinner-border {
  2. position: relative;
  3. width: 1px;
  4. margin:14px 0;
  5. height: 20px;
  6. }
  7. .thinner-border:after {
  8. content: '';
  9. position: absolute;
  10. width: 500%;
  11. height: 500%;
  12. border: 1px solid #ffd000;
  13. transform-origin: 0 0;
  14. transform: scale(0.2, 0.2);
  15. box-sizing: border-box;
  16. }

移动端比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. 计算机网络——HTTP

    目录 计算机网络-HTTP篇 HTTP 基本概念 常见状态码 常见字段 Get 与 Post HTTP 特性 HTTP(1.1) HTTP/1.1 HTTPS 与 HTTP HTTP/1.1.HTTP ...

  2. 正则表达式(二)——Python中的相关方法

    正则函数 match.search.findall.finditer.split.sub 返回一个对象:match.search.finditer 返回一个列表:findall.split 其中mat ...

  3. (第一章第三部分)TensorFlow框架之会话

    系列博客链接: (一)TensorFlow框架介绍:https://www.cnblogs.com/kongweisi/p/11038395.html (二)TensorFlow框架之图与Tensor ...

  4. C语言之判断质数算法

    今天学校OJ的一题判断是质数和合数. 首先我们要弄明白质数和合数的概念:质数就是除了本身和1以外没有其他因数的数,合数就是除了本身和1以外还有其他因数的数.注意:1既不是质数也不是合数. 明白了概念, ...

  5. LabVIEW,控件快捷菜单,温度转换

    目前正在自学LabVIEW,深感困难重重,我将偶尔发表一些自己的收获,自认为算是干货了, 搜到这篇随笔的朋友们或多或少遇到了些许困难,希望这能帮助到你们. 内容:练习使用LabVIEW中的控件快捷菜单 ...

  6. php使用kafka代码

    生产者 producer.php文件 <?php /** * Created by PhpStorm. * User: shiyibo * Date: 2019/2/24 * Time: 12: ...

  7. call、apply 和 bind

    call().apply().bind() 都是用来重定义 this 这个对象的! var obj1 = { username: "HuiTaiLang", fn: functio ...

  8. 1. 查看NGINX是否在运行.

    1. 查看NGINX是否在运行. ps aux | grep nginx [root@bogon /]# ps aux | grep nginx root 2318 0.0 0.0 56816 127 ...

  9. bash shell 快捷键

     Bash Shell 快捷键: Ctrl + a - 跳到行首      Ctrl + e - 跳到行尾     Ctrl + k - 从光标处删除到行尾     Ctrl + l - 清屏,类似  ...

  10. vue2版本中slot的基本使用详解

    前言 在vue的开发过程中,我们会经常使用到vue的slot插槽组件,vue官方文档的描述: Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案 ...