html - 关于CSS实现border的0.5px设置？

问题描述

问 题

网上看到的代码，有些不理解的地方：

.custom-border{
    width:200px;
    margin:10px auto;
    height:100px;
    border:1px solid #333;
    background-color:#eee;
    padding:10px;
}
.scale-border{
    margin:10px auto;
    height:100px;
    position:relative;
    padding:10px;
    width: 200px;
}
.border{
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
    position:absolute;
    border:1px solid #333;
    top:-50%;
    right:-50%;
    bottom:-50%;
    left:-50%;
    border-radius: 10px;
    background-color:#eee;
}
.content{
    position:relative;
    z-index:2;
}

<div class="custom-border border-color">边框宽度1px</div>
<div class="scale-border">
    <div class="content">边框宽度0.5px</div>
    <div class="border border-color"></div>
</div>

请问在这里CSS代码中的

top:-50%;
right:-50%;
bottom:-50%;
left:-50%;

是什么意思？实现这个0.5px的边框的原理是什么？
btw，transform:scale是不是在项目中挺少用到的？百度了好久关于scale 的详细用法甚少。。

解决方案

其实主要是scale(0.5)把它缩小到0.5px；然后利用

top:-50%;
right:-50%;
bottom:-50%;
left:-50%;

去把它变大到原来的大小。但是这个变大并不影响边框的大小;

这篇关于html - 关于CSS实现border的0.5px设置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！