CSS实现0.5px边框

边框效果用移动浏览器看更明显，变化的是线宽而不是颜色

注意：虽然理论上边框可以任意细（1/n px），但由于存在精度的问题（精度影响边框的宽高），所以半像素边框是最有实用意义的，虽然也存在问题：如果宽高是奇数则边框位置会偏移0.5px，实际应用中尚可接受

<div class="border_1_0_px">1像素边框，block</div>

.border_1_0_px {
    border: 1px solid #000;
}

<div class="border_0_5_px">半像素边框，block</div>

.border_0_5_px {
    position: relative;
}

.border_0_5_px:before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    -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;
}

更多示例,请点击鼠标右键,查看源代码: