由于设计图的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. 国产smartbits版本-minismb如何测试路由器III

    Minismb测试仪表是复刻smartbits的国产版本,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此工具测试任何ip网络设备的端口吞吐率,带宽,并发连接数和 ...

  2. OpenStack Train版-12.创建虚拟网络并启动实例(控制节点)

    使用VMware虚拟机创建网络可能会有不可预测到的故障,可以通过dashboard界面,管理员创建admin用户的网络环境 1.第一种: 建立公共提供商网络在admin管理员用户下创建 source ...

  3. Nginx location相关配置说明

    Nginx location相关配置说明       基于不同的IP.不同的端口以及不用得域名实现不同的虚拟主机,依赖于核心模块ngx_http_core_module实现. 新建PC web站点 [ ...

  4. Leetcode(213)-打家劫舍II

    你是一个专业的小偷,计划偷窃沿街的房屋,每间房内都藏有一定的现金.这个地方所有的房屋都围成一圈,这意味着第一个房屋和最后一个房屋是紧挨着的.同时,相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在 ...

  5. 计蒜客 第四场 C 商汤科技的行人检测(中等)平面几何好题

    商汤科技近日推出的 SenseVideo 能够对视频监控中的对象进行识别与分析,包括行人检测等.在行人检测问题中,最重要的就是对行人移动的检测.由于往往是在视频监控数据中检测行人,我们将图像上的行人抽 ...

  6. Laravel Homestead 安装 使用教程详解!

    1 Laravel Homestead 1 安装: 1 下载: http://www.vagrantup.com/downloads.html 1 配置: 1 1 测试: 1 1 ********** ...

  7. flutter package & pub publish

    flutter package & pub publish dart-library-package https://pub.dev/packages/dart_library_package ...

  8. Google & Chrome console & text adventure game

    Google & Chrome console & text adventure game Google's text adventure game https://www.googl ...

  9. js 如何获取某一个月的第一天是周几

    js 如何获取某一个月的第一天是周几 calendar ??? padding dates // day = 1 const firstMonthDate = new Date(year + mont ...

  10. 使用docker mediawiki,搭建网页wiki

    我只是想做一个大家都能访问的wiki,用于成员间共享和维护一些文档.找到了docker的mediawiki,这里记录一下我怎么搭的吧. 首先,如果你在一个局域网里,有公用的可以访问的服务器,那可以直接 ...