网上看到的代码，有些不理解的地方：
上看到的代码，有些不理解的地方： .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; } 边框宽度1px 边框宽度0.5px
请问在这里CSS代码中的
top:-50%; right:-50%; bottom:-50%; left:-50%;
是什么意思？实现这个0.5px的边框的原理是什么？btw，transform:scale是不是在项目中挺少用到的？百度了好久关于scale 的详细用法甚少
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
About the 0.5px setting of CSS implementation border? -PHP Chinese website Q&A-About the 0.5px setting of border in CSS? -PHP Chinese website Q&A
Let’s take a look and learn.
是为了放大到原始.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应该可以放心使用。