transform的scale到底怎么写的？

Question

最近做的项目里有一个做重构的同学走了，然后重构就自己写了，然后遇到了常见的ios一像素问题，虽然这个问题网上已经有答案了，但是在找答案的过程中遇到了一些疑问，经过百度无果后在来这里找大牛解答。

网上给出的方案很多，但最多人使用的应该是用js把viewport给重设或者使用css缩放，我采取了第二种方案。但发现了自己还是对transform这个属性不了解，一般这个属性的写法是：

transform：scale(0.5);

但我找到一像素的写法是这样的：

transform(scale(0.5));

希望有大牛给我解答一下，这是找到一像素的写法

        .radius-border{
            position: relative;
        }
        .radius-border:after{
            content: "";
            box-sizing: border-box;
            position: absolute;
            width: 85px;
            height: 26px;
            left: 0;
            top: 0;
            border-radius: 50px;
            border:1px solid rgba(42, 146, 235,0.3);
            -webkit-transform(scale(0.5));
            -webkit-transform-origin: 0 0;
            transform(scale(0.5));
            transform-origin: 0 0;
        }
        .radius-border .txt{
            position: absolute;
            left: 13px;
            top: 3px;
            font-size: 14px;
            color: #2A92EB;
        }
        
        <div class="radius-border">
            <span class="txt">向Ta提问</span>
        </div>

Answer 1

怎么楼上关心的重心都错了..（敲黑板！

题主想问的是，我找到的这个方法为啥transform可以像函数一样调用，这种食用方式没见过呀
事实上，这种东西只要题主放在浏览器测试一下就知道结果了——transform(scale(0.5));在浏览器上根本就不生效（因为它不规范）..

那么就得出了两种结果：

1. 原作者写错了
2. 实际上可能原作者使用的是css预处理，因此有这样的语法。

Answer 2

这是处理 2 倍屏的做法，将 border 缩小为 0.5 倍的尺寸，如果是 3 倍屏，就是 scale(0.3333)。

Answer 3

在二分屏上，如果不做viewport级别的缩放，那么一个css像素将对应两个物理像素。但浏览器对‘0.5px’的‘理解’是不稳定，。它可能会渲染成1物理像素，也有可能渲染成0。transfrom可以看成对元素的第二次绘制，这种绘制的在图形图像上更加精确。scale属性，是形变。scale(0.5)会把 22个物理像素的图像绘制成11个物理像素。

Answer 4

看起来好像是预处理器的函数写法，标准CSS我没有找到这样的写法。