CSS變數可以動態地使用不同的單位嗎？

具有動態單位的無單位 CSS 變數

在使用基於百分比的值和無單位值時，操作 CSS 變數通常會帶來挑戰。這個問題探討如何分配一個無單位的 CSS 變量，然後將其與各種單位互換使用。

問題：

CSS 變數可以設定一個數字，然後在一種情況下用作百分比，在另一種情況下用作普通數字？例如：

--mywidth:10;

div{width:var(--mywidth) + %;}  --- should be ---> width:10%

答案：

是的，可以使用 calc() 函數來實現這一點。透過將變數乘以適當的單位，我們可以動態地將其轉換為任何所需的單位。

要將變數--mywidth 用作百分比，我們可以乘以1%：

div{width:calc(var(--mywidth) * 1%);}

範例：

以下程式碼示範如何使用calc() 函數為無單位CSS 變數動態新增單位：

:root {
  --a:50;
}

.box {
  width:calc(var(--a) * 1%);
  border:calc(var(--a) * 0.5px) solid red;
  background:linear-gradient(calc(var(--a) * 0.8deg),blue 50% ,green 0);
  padding:20px;
  
  box-sizing:border-box;
}

<div class="box"></div>

以上是CSS變數可以動態地使用不同的單位嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！