由于设计图的1px在移动端开发中的像素比是2倍,在实际开发中却是需要1px的线条,虽然最直接的方式是将线条设置为0.5px,但有些移动端对于0.5px的解析为0,变成了无边框的显示。因此处理该需求我们可以使用css3提供的缩放属性和伪类选择来实现1px。

例:

html:

<div class="border">
  <div class="content">设置1px的边框</div>
</div>

css:

.border{
  position: relative;
}

.border:after {
   content: '';
  position: absolute;
  width: 200px;
  border-bottom: 1px solid red;
   -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  -o-transform: scaleY(0.5);
   transform: scaleY(0.5); 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

除了使用伪类的方式,也可以创建高度为1px的div线条,并将其缩放为0.5的线条,使用时进行位置设置。

例:
html:
<div class="border"></div>
css:

.border{
  width:200px;
  border-bottom: 1px solid #000;
  transform: scaleY(0.5);
}

(*^▽^*)

css实现0.5像素的底边框。的更多相关文章

  1. css实现0.5像素的边框

    公司的设计师在做设计图的时候都是以iphone6(宽为750物理像素)为基准进行设计的.iphone6的设备像素比(即css像素与物理像素的比例)是2,所以设计师在设计图画了边框为1px的box的时候 ...

  2. css实现0.5像素

    .border{ position: relative; } .border:before{ content: ''; position: absolute; width: 200%; height: ...

  3. css技巧之如何实现ul li边框重合

    提到边框重合,我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲,你看到了,正是这个,边框重合.其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很 ...

  4. 解决CSS图片底部3像素问题总结

    解决三像素问题的总结: 1.img标签的父标签增加font-size:0; 如.body{ font-size: 0; } 2.img标签增加display:block; img{display:bl ...

  5. CSS border-right-style属性设置元素的右边框样式

    CSS border-right-style属性设置元素的右边框样式 边框的样式指的是边框的线条属性,指的是边框采用的是实线效果.短线效果还是其它的线条效果. border-right-style属性 ...

  6. css重修之书(一):如何用css制作比1px更细的边框

    如何用css制作比1px更细的边框 在项目的开发过程中,我们常常会使用到border:1px solid xxx,来对元素添加边框: 可是1px的border看起来还是粗了一些粗,不美观,那么有什么方 ...

  7. web前端绘制0.5像素的几种方法

    最近完成了公司安排的移动web触屏开发,期间涉及到在移动设备上显示线条,最开始采用PC常用的css board属性来显示1个像素的线条,但是发现在移动设备上并不美观,参考淘宝.京东的触屏发现它们均是采 ...

  8. css实现input文本框的双边框美化

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. css font-size=0的妙用

    转自:css font-size=0有什么妙用? 回答一: 问题的根源是 inline(a标签默认是display:inline) 和 inline-block (.list-info 设置的是 di ...

随机推荐

  1. SDN总结

    之前做项目用到了SDN,知道其作用,但是对其不是特别熟悉,今天特来总结一下相关知识点: 1. SDN的典型架构分为哪三层 主要分为应用层,控制层,和基础设施层: 2. SDN技术的关键点是 控制平面和 ...

  2. codeforce 855B

    B. Marvolo Gaunt's Ring time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  3. codeforces 758D

    D. Ability To Convert time limit per test 1 second memory limit per test 256 megabytes input standar ...

  4. μC/OS-III---I笔记1---概述

    在裸板上跑一些程序对于一些电子设计是足够的,所谓裸板上的程序就是传统的前后台系统,而我的理解它应该是一种"过程类"的程序,一个大循环(作为后台)做一些处理,中断程序(作为前台)来处 ...

  5. 后Low Code时代:聚焦和突破

    很多人都不想被贴上标签,我曾经也一样.觉得青春不能被定义,人也不能被分类.但随着学习和工作的变迁,慢慢开始发现标签也是一种名片效应. 比如一个做汽车销售的朋友,他就对BMW的车型非常熟悉,可以说是懂车 ...

  6. tfrecords转np.array

    import tensorflow as tf import numpy as np from keras.utils import to_categorical import sys def tfr ...

  7. flex item default All In One

    flex item default All In One flex item default 初始值 === flex: 0 1 auto; https://drafts.csswg.org/css- ...

  8. Chrome & console.log & color & js

    Chrome & console.log & color & js console.log & color // OK log(`%cchat_list =\n%c${ ...

  9. 为什么空投总是抢不到?大神教你狂撸SPC!

    为什么空投总是抢不到?你是否总有这样的疑虑.明明现在区块链市场中空投项目这么多,明明身边的朋友都抢到了空投,明明人家都已经躺赚百万千万,为何只有我,什么都没抢到.今天,本文将教你如何抢空投,成为下一个 ...

  10. 人物传记-BILL RAY:低谷时的信念,决定你能走多远

    自2018年全球经济危机以来,以工作为重的成年人们一直备受打击.尤其是2020年,全球贸易争端使得经济下滑严重,很多公司倒闭破产,有些人甚至从富豪变成了负债者,走向了人生低谷.其实,每个人都会遇到人生 ...