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>
复制代码

 

posted @   晨の风  阅读(380)  评论(0)    收藏  举报
编辑推荐:
· 我在厂里搞 wine 的日子
· 如何通过向量化技术比较两段文本是否相似?
· 35+程序员的转型之路:经济寒冬中的希望与策略
· JavaScript中如何遍历对象?
· 领域模型应用
阅读排行:
· 独立开发,这条路可行吗?
· Java简历、面试、试用期、转正
· C#源生成器:让你的代码飞起来的黑科技
· SpringBoot3 + LangChain4j + Redis 实现大模型多轮对话及工具调用
· Java开发AI项目,太爽了!LangChain4j保姆级教程
点击右上角即可分享
微信分享提示