我最近注意到Codepen的一個有趣的變化：在懸停在主頁上的筆時，有一個矩形，後面有圓角。

作為我的好奇生物，我必須檢查一下這是如何工作的！事實證明，後面的矩形絕對位置：偽元素之後。

ON：懸停，其偏移被覆蓋，並結(jié)合過渡，我們獲得了擴展的框效果。

右屬性在初始和懸停規(guī)則集中都具有相同的值（-1REM），因此不需要覆蓋它，但是所有其他偏移都在2rem向外移動（從1REM到-1REM到-1REM到-1REM到頂部和左側(cè)偏移，從-1REM到-1REM，從-1REM到-3REM到-3REM to -3Rem for -tost OffeT of tost ofert ofst offeT over the Bosteal）

在這裡要注意的一件事是，偽元素的邊界是10px之後的::，隨著它的擴展，它被保留。這使我想到了我們在保留邊界 - 拉迪烏斯（Border-Radius）的同時，我們採用了什麼方法來擴展/收縮（偽）。你能想到多少？讓我知道您是否有下面尚未包括的想法，我們可以查看很多選擇，並查看哪種情況最適合什麼情況。

更換偏移

這是在Codepen上使用的方法，由於多種原因，它在這種特殊情況下非常有效。首先，它有很大的支持。當(dāng)擴展（偽）元素響應(yīng)迅速，沒有固定尺寸，並且其擴展的量為固定的數(shù)量（rem值）時，它也起作用。它還可以在兩個以上的方向上擴展（在此特定情況下，頂部，底部和左側(cè)）。

但是，我們需要注意一些警告。

首先，我們擴展的元素不能具有位置：靜態(tài)。在CodePen用例的上下文中，這不是問題，因為:: pseudo-element之後需要絕對放置，以便將其放置在此父母的其餘內(nèi)容下。

其次，與偏移動畫（通常，都會對任何影響佈局的屬性進行動畫範(fàn)圍，從而使用框?qū)傩詠砥?，邊距，邊框?qū)挾龋瑯寤虺叽绲膶傩裕π阅墚a(chǎn)生負面影響。同樣，這不是關(guān)注的問題，我們只有一點過渡：懸停，沒什麼大不了的。

改變尺寸

我們可以更改尺寸，而不是更改偏移。但是，如果我們希望我們（偽 - ）元素擴展到兩個方向，則這是一種有效的方法。否則，我們也需要更改偏移。為了更好地理解這一點，讓我們考慮使用Codepen的情況，在該情況下，我們希望我們的::偽元素在三個方向（頂部，底部和左）擴展。

相關(guān)的初始尺寸信息如下：

 .single-item :: after {
  頂部：1REM;
  右：-1REM;
  底部：-1REM;
  左：1REM;
}

由於相反的偏移量（頂部 - 底部和左 - 右對）相互取消（1REM -1REM = 0），因此會導(dǎo)致偽元素的尺寸等於其父母的尺寸（或父母尺寸的100％）。

因此，我們可以重寫以上內(nèi)容為：

 .single-item :: after {
  頂部：1REM;
  右：-1REM;
  寬度：100％；
  身高：100％；
}

ON：懸停，我們將寬度向左增加2rem，而高度則增加4REM，將2REM和2REM和2REM增加到底部。但是，只是寫：

 .single-item :: after {
  寬度：計算（100％2REM）;
  高度：計算（100％4REM）;
}

…還不夠，因為這會使高度向下增加4REM，而不是將其增加2REM向上和2REM向下增加。以下演示說明了這一點（放在：專注於或懸停在項目上，以查看偽元素後的::如何擴展）：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

我們還需要更新頂級屬性以獲得理想的效果：

 .single-item :: after {
  頂部：-1REM;
  寬度：計算（100％2REM）;
  高度：計算（100％4REM）;
}

可以在下面看到的，有效的是：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

但是，老實說，這比單獨改變偏移量不太理想。

但是，在不同種類的情況下，改變尺寸是一個很好的解決方案，例如，當(dāng)我們想擁有一些帶有圓角的桿時，它們會朝著一個方向擴展/收縮。

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

請注意，如果我們沒有圓角可以保存，那麼更好的解決方案是通過轉(zhuǎn)換屬性使用方向縮放。

更改填充/邊界寬度

類似於改變尺寸，我們可以更改填充或邊界寬度（對於透明的邊界）。請注意，就像更改尺寸一樣，如果在超過兩個維度上擴展框，我們也需要更新偏移量：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

在上面的演示中，粉紅色的盒子表示假元素之後的::的內(nèi)容框，並且您可以看到它保持相同的大小，這對於這種方法很重要。

為了理解為什麼重要的原因，請考慮其他限制：我們還需要將兩個偏移量加上寬度和高度定義的框尺寸，而不是使用所有四個偏移。這是因為只有在使用四個偏移而不是兩個加寬度和高度的情況下，填充/邊界寬度才會向內(nèi)增長。

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

出於同樣的原因，我們無法在偽元素之後的boxsing signssing：border-box上。

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

儘管存在這些局限性，但如果我們的擴展（偽 - ）元素具有我們不想看到的文本內(nèi)容，則該方法可能會派上用場：如下筆所示，懸停在其中，前兩個示例會更改偏移/尺寸，而最後兩個更改paddings/ border寬度：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

更改邊距

使用此方法，我們首先將偏移設(shè)置為：懸停狀態(tài)值和余額以補償並為我們提供初始狀態(tài)大?。?/p>

 .single-item :: after {
  頂部：-1REM;
  右：-1REM;
  底部：-3REM;
  左：-1REM;
  邊距：2REM 0 2REM 2REM;
}

然後，我們?yōu)榇丝臻g為零：懸停：

 .single-item：hover :: after {margin：0} 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

這是另一種適合Codepen情況的方法，儘管我真的不能想到其他用例。另請注意，就像更改偏移或尺寸一樣，此方法會影響內(nèi)容框的大小，因此我們可能會移動和重新排列的任何文本內(nèi)容。

更改字體大小

這可能是最棘手的，並且有很多局限性，其中最重要的是我們不能在擴展/收縮的實際（偽 - ）元素上具有文本內(nèi)容 - 但這是在Codepen情況下可以很好地工作的另一種方法。

另外，字體尺寸本身並沒有任何事情可以使盒子擴展或收縮。我們需要將其與先前討論的屬性之一相結(jié)合。

例如，我們可以將字體大小設(shè)置為::之後等於1REM，將偏移設(shè)置為擴展的情況，並設(shè)置與擴展的和初始狀態(tài)之間的差異相對應(yīng)的EM邊距。

 .single-item :: after {
  頂部：-1REM;
  右：-1REM;
  底部：-3REM;
  左：-1REM;
  邊距：2EM 0 2EM 2EM;
  字體大?。?REM;
}

然後，開：懸停，我們將字體大小提高到0：

 .Single-item：Hover :: after {font-size：0} 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

我們還可以將字體大小與偏移量一起使用，儘管它變得更加複雜：

 .single-item :: after {
  頂部：calc（2em -1REM）;
  右：-1REM;
  底部：計算（2em -3REM）;
  左：calc（2em -1REM）;
  字體大?。?REM;
}

.Single-item：Hover :: after {font-size：0}

儘管如此，重要的是它起作用，如下所示：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

將字體大小與尺寸結(jié)合起來甚至更容易發(fā)生，因為我們還需要更改垂直偏移值：懸停在所有內(nèi)容之上：

 .single-item :: after {
  頂部：1REM;
  右：-1REM;
  寬度：計算（100％2EM）;
  高度：計算（100％4EM）;
  字體大小：0;
}

。
  頂部：-1REM;
  字體大小：1REM
}

哦，嗯，??至少它有效：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

同樣的事情也適用於填充/邊框?qū)挾鹊淖煮w大?。?/p>

 .single-item :: after {
  頂部：1REM;
  右：-1REM;
  寬度：100％；
  身高：100％；
  字體大?。?;
}

。
  填充：2EM 0 2EM 2EM;
}

。
  邊界：實心0透明；
  邊緣寬度：2EM 0 2EM 2EM;
}

。
  頂部：-1REM;
  字體大小：1REM;
} 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

變化規(guī)模

如果您閱讀了有關(guān)動畫性能的文章，那麼您可能已經(jīng)閱讀了動畫變換，而不是影響佈局的屬性，例如偏移，保證金，邊框，邊框，槳，尺寸，尺寸 - 幾乎是我們到目前為止使用的！

這裡突出的第一個問題是，縮放元素還縮放了其角舍入，如下所示：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

我們可以通過以另一種方式縮放邊界拉迪烏斯來解決這個問題。

假設(shè)我們沿X軸和沿Y軸的因子$ fx擴展了一個因子$ fx，我們希望將其邊界-radius保持在恆定值$ r。

這意味著我們還需要將$ R除以每個軸的相應(yīng)縮放係數(shù)。

 Border-Radius：＃{$ r/$ fx}/＃{$ r/$ fy};
變換：比例尺（$ fx，$ fy） 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

但是，請注意，使用這種方法，我們需要使用縮放因素，而不是在此或該方向上擴展（偽 - ）元素的數(shù)量。從尺寸和擴展量中獲取縮放因素是可能的，但前提是它們以它們之間具有一定固定關(guān)係的單位表示。由於1英寸始終是96px，預(yù)處理程序可以混合或PX之類的單位，但由於缺乏上下文，他們無法解析PX中的1em或1％或1Vmin或1ch。 calc（）也不是解決方案，因為它不允許我們將長度值除以其他長度值以獲得無單位比例因子。

這就是為什麼在Codepen情況下，縮放不是解決方案的原因，在codepen情況下，:: box的尺寸取決於視口，同時又擴展了固定的REM量。

但是，如果給出了規(guī)模的數(shù)量，或者我們可以輕鬆地計算它，則可以考慮使用，尤其是因為製作縮放因子自定義屬性，然後使用一些Houdini Magic進行動畫化，可以極大地簡化我們的代碼。

 border-radius：calc（＃{$ r}/var（-fx））/calc（＃{$ r}/var（ -  fy））;
變換：比例尺（var（-fx），var（-fy））

請注意，Houdini僅在啟用實驗Web Platform特徵標誌的Chromium瀏覽器中工作。

例如，我們可以創(chuàng)建此瓷磚網(wǎng)格動畫：

方瓷磚具有邊緣長度$ l，並且有$ k*$ l的角圓形：

 .tile {
  寬度：$ L；
  身高：$ L；
  border-radius：calc（＃{$ r}/var（-fx））/calc（＃{$ r}/var（ -  fy））;
  變換：比例尺（var（-fx），var（-fy））
}

我們註冊了我們的兩個自定義屬性：

 CSS.RegisterProperty（{
  名稱：' -  fx'， 
  語法：''， 
  初始值：1， 
  繼承：false
}）;

CSS.RegisterProperty（{
  名稱：' -  -fy'， 
  語法：''， 
  初始值：1， 
  繼承：false
}）;

然後我們可以使它們動畫：

 .tile {
  / *與以前相同 */
  動畫：$ t無限的輕鬆替代品；
  動畫名稱：FX，F(xiàn)Y；
}

@keyframes fx {
  0％，35％{-fx：1}
  50％，100％{-fx：＃{2*$ k}}}
}

@keyframes fy {
  0％，35％{ -  -FY：1}
  50％，100％{ -  -fy：＃{2*$ k}}}
}

最後，根據(jù)水平（-i）和垂直（ - J）網(wǎng)格索引，我們添加了一個延遲，以創(chuàng)建交錯的動畫效果：

動畫 - 延遲： 
  calc（（var（-i）var（-m）-v var（-j））*＃{$ t}/（2*var（-m）） - ＃{$ t}）， 
  calc（（var（-i）var（-m）-var（-j））*＃{$ t}/（2*var（-m）） - ＃{1.5*$ t}）

另一個示例是以下一個，其中藉助偽元素創(chuàng)建點：

由於偽元素與父母一起縮放，因此我們還需要扭轉(zhuǎn)對他們的縮放變換：

 。長釘 {
  / *其他尖峰樣式 */
  變換：var（ - 位置）scalex（var（-fx））;

  ＆::之前，＆:: efter {
    / *其他偽樣式 */
    變換：scalex（calc（1/var（-fx）））;
  }
}

更改…剪貼路徑？

這是我非常喜歡的一種方法，即使它削減了牙質(zhì)優(yōu)勢和Internet Explorer的支持。

幾乎所有的用法示例示例都具有polygon（）值或SVG參考值。但是，如果您已經(jīng)看過我以前的一些文章，那麼您可能知道我們可以使用其他基本形狀，例如Intet（），如下所示：

因此，為了使用此方法重現(xiàn)Codepen效應(yīng)，我們將:: ::設(shè)置為偏移到擴展的狀態(tài)值之後，然後在剪輯路徑的幫助下刪除我們不想看到的內(nèi)容：

 .single-item :: after {
  頂部：-1REM;
  右：-1REM;
  底部：-3em;
  左：-1EM;
  剪輯路徑：插圖（2REM 0 2REM 2REM）
}

然後，在：懸停狀態(tài)下，我們將所有插圖歸零：

 。
  剪輯路徑：插圖（0）
}

這可以在下面的行動中看到：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

好吧，這有效，但我們也需要一個圓形的圓形。幸運的是，inset（）也可以讓我們將其指定為我們可能希望的邊界 - 拉迪烏斯價值。

在這裡，沿兩個方向的所有角落都有一個10px。

 .single-item :: after {
  / *與以前相同的樣式 */
  剪輯路徑：插圖（2REM 0 2REM 2REM圓形10PX）
}

。
  剪輯路徑：插圖（0回合10px）
}

這為我們提供了我們所要做的事情：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

此外，它並沒有真正破壞不支持的瀏覽器，它總是保持在擴展?fàn)顟B(tài)。

但是，儘管這是適合多種情況（包括Codepen用例）非常有用的方法，但當(dāng)我們的擴展/收縮元素具有後代的後代，它不起作用，這些後代可以超出其剪切的父母的邊框盒子，因為對於先前討論的縮放方法給出的最後一個示例就是這種情況。

以上是在保留邊框半徑的同時，擴展盒子的各種方法的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！