zoukankan      html  css  js  c++  java
  • css 半像素

      项目中需要用到 0.5px 的边框时,我们不能通过直接设置 border 为 0.5px ,这时候就需要 css3 的缩放来变通。

        /* 定义目标元素的定位方式 */
        .thinner,.thinner-top,.thinner-all{
          position: relative;
        }
        /* 定义在底部的 border */
        .thinner:after{
          content: '';
          display: block;
          position: absolute;
          bottom: 0;
          left:0;
          right: 0;
          width: 100%;
          height: 1px;
          border-bottom: 1px solid #dedede; 
          transform-origin: 0 0;
          transform: scale(1, 0.5);
        }
        /* 定义在顶部的 border */
        .thinner-top:before{
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left:0;
          right: 0;
          width: 100%;
          height: 1px;
          border-top: 1px solid #dedede; 
          transform-origin: 0 0;
          transform: scale(1, 0.5);
        }
        /* 定义包裹的 border */
        .thinner-all:before{
          content: '';
          display: block;
          position: absolute;
          width: 200%;
          height: 200%;
          border: 1px solid #dedede; 
          transform-origin: 0 0;
          transform: scale(0.5, 0.5);
          z-index: -1;
        }

    使用如下:

    <div class="container">
      <div class='thinner'>
        <p>文本000</p>
      </div>
      <br>
      <br>
      <div class='thinner-top'>
        <p>文本111</p>
      </div>
      <br>
      <br>
      <div class='thinner-all'>
        <p>文本222</p>
      </div>
    </div>
  • 相关阅读:
    Cocos2d Box2D之动态刚体
    Cocos2d Box2D之简介
    Cocos2d-x之物理引擎
    Cocos2d-x之UI控件简介
    Cocos2d-x之数据的处理
    My First Django Project (3)
    My First Django Project (2)
    My First Django Project
    Python 学习笔记
    利用python scrapy 框架抓取豆瓣小组数据
  • 原文地址:https://www.cnblogs.com/_error/p/9199184.html
Copyright © 2011-2022 走看看