問(wèn)題描述

網(wǎng)上看到的代碼，有些不理解的地方：

.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;}<p class='custom-border border-color'>邊框?qū)挾?px</p><p class='scale-border'> <p class='content'>邊框?qū)挾?.5px</p> <p class='border border-color'></p></p>

請(qǐng)問(wèn)在這里CSS代碼中的

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

是什么意思？實(shí)現(xiàn)這個(gè)0.5px的邊框的原理是什么？btw，transform:scale是不是在項(xiàng)目中挺少用到的？百度了好久關(guān)于scale 的詳細(xì)用法甚少。。

問(wèn)題解答

其實(shí)主要是scale(0.5)把它縮小到0.5px；然后利用

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

去把它變大到原來(lái)的大小。但是這個(gè)變大并不影響邊框的大小;

首先 transform:scale(0.5); 表示縮放1/2的意思，就會(huì)變成這樣（黑色外邊框是特意加上去對(duì)比的）：

因?yàn)閷?duì)于縮放而言是整體縮小。所以呢，縮小以后，又需要把她拉回原來(lái)的大小，這樣看起來(lái)才像0.5px的邊框，即：

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

感覺(jué)多加一個(gè) <p> 來(lái)表示0.5px的大小，并不優(yōu)雅，于是改寫這樣：

.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;}.scale-border::after{ content: ’ ’; -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;}

<p class='custom-border border-color'>邊框?qū)挾?px</p><p class='scale-border'> <p class='content'>邊框?qū)挾?.5px</p></p>回答3：

是為了放大到原始.scale-border的兩倍大小。因?yàn)?border是絕對(duì)定位（position:absolute;），所以其定位是根據(jù)其最近的非position:static來(lái)定的，而.scale-border是相對(duì)定位的（position:relative;），所以

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

就是.border以.scale-border的中心為中心，放大到兩倍，然后再ransform:scale(0.5);縮小到1/2，那就和.scale-border一樣大小了。此時(shí)的 1px border，就變?yōu)?0.5px。

transform應(yīng)該可以放心使用。

兄弟，看這個(gè)你就明白了。https://developer.mozilla.org...