2020.08.18--------小程序伪类实现0.5px遇到的border-radius问题

问题：tag边框要求为0.5px，于是选择使用::after实现，结果发现使用了伪类后，border-radius达不到预期的要求

于是自己写了小样式来测试

• 代码：

.border {
    position: relative;
    line-height:40px;
    text-align:center;
    color:#0ac993;
    width:200px;
    border-radius:20px;/* 设置圆角 */
    background: pink;    
}
.border:before {
    content: "";
    position: absolute;
    left:0;
    width: 200%;
    height: 200%;
    box-sizing: border-box;
    border: 1px solid #0ac993;
    border-radius:20px;/* 设置圆角 */
    -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);
}

• 效果图：
  

明明border-radius设置的值一样，呈现的效果却不一样，多次测试发现，应当是与元素的height有关，因为当两个border-radius都与元素height一样时，就不会出现这样的问题

• 解决方法：

• 当需求有固定的border-radius与height要求时，不可以随意更改元素的height值的border-radius，将伪类的border-radius设置为元素的border-radius的两倍大小即可。

• 代码：

.border {
    position: relative;
    line-height:80px;
    text-align:center;
    color:#0ac993;
    width:200px;
    border-radius:20px;/* 设置圆角 */
    background: pink;
    
}
.border:before {
    content: "";
    position: absolute;
    left:0;
    width: 200%;
    height: 200%;
    box-sizing: border-box;
    border: 1px solid #0ac993;
    border-radius:40px;/* 设置两倍圆角 */
    -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);
}