网上看到的代码，有些不理解的地方：
2
1625上看到的代码，有些不理解的地方：
.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 的详细用法甚少
收藏
收藏
收藏
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
关于CSS实现border的0.5px设置？-PHP中文网问答-关于CSS实现border的0.5px设置？-PHP中文网问答
围观一下哦，学习一下。
是为了放大到原始.scale-border的两倍大小。
因为.border是绝对定位（position:absolute;），所以其定位是根据其最近的非position:static来定的，而.scale-border是相对定位的（position:relative;），所以
就是.border以.scale-border的中心为中心，放大到两倍，然后再ransform:scale(0.5);缩小到1/2，那就和.scale-border一样大小了。此时的 1px border，就变为 0.5px。
transform应该可以放心使用。
是为了放大到原始.scale-border的两倍大小。
因为.border是绝对定位（position:absolute;），所以其定位是根据其最近的非position:static来定的，而.scale-border是相对定位的（position:relative;），所以
top:-50%;right:-50%;bottom:-50%;left:-50%;
就是.border以.scale-border的中心为中心，放大到两倍，然后再ransform:scale(0.5);缩小到1/2，那就和.scale-border一样大小了。此时的 1px border，就变为 0.5px。
transform应该可以放心使用。