zoukankan      html  css  js  c++  java
  • css实现0.5像素的底边框。

    由于设计图的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{
      200px;
      border-bottom: 1px solid #000;
      transform: scaleY(0.5);
    }

    (*^▽^*) 

  • 相关阅读:
    慕课前端入门-HTML5属性变化
    黑马jQuery教程4
    黑马jQuery教程3
    黑马JQuery教程2
    2017-03-15
    按钮图标化
    AES MFC实现
    CButtonST类简介使用方法
    VS资源编辑器常见错误RC1000到RC1208
    MFC单文档程序添加HTML帮助支持
  • 原文地址:https://www.cnblogs.com/min77/p/12843288.html
Copyright © 2011-2022 走看看