CSS3 如何设置一个”0.5像素”的边框呢?


摘要:
下文讲述css3中实现一个“0.5像素”边框的示例分享,如下所示:

我们都知道,div的最小边框只能设置为1px,有时候领导要求我们将像素设置为更小,如:0.5px,我们该如何处理呢?下文将一一道来:

 实现思路:
      1.设置目标元素作为定位参照
      .border {
            position:relative;
       }
       2.为目标元素设置一个伪元素,
        设置绝对定位
        伪元素设置1像素的边框
        设置其宽度高度为参照元素的2倍
        缩放元素为1
        box-sizing:border-box;
        使边框一起缩放
     .border:before {
        content:"";
        position:absolute;
        border:1px solid blue;
        width:200%;
        height:200%;
       
        transform-origin: 0 0;
        transform: scale(0.5, 0.5);
    
        box-sizing: border-box; 
     } 

例:
将div的边框设置为0.5px(像素)的示例分享

<meta charset='utf-8' />
<p>
  maomao365.com <br />
  设置0.5像素的边框的示例分享
</p>
<hr />
<style>
.borderHalve {
    position: relative;
    background-color:green;
    color:white;font-weight:bold;
    height:200px;
    width:300px;
}
 
.borderHalve:before {
    content: "";/* 注意这里为双引号 */
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid blue;
    border-radius:5px;/* 也可以设置圆角 */
    -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: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
</style>
<div class='borderHalve'>
  猫猫教程--0.5px像素示例分享
</div>
 
css设置0.5像素的边框示例分享

css设置0.5像素的边框示例分享