在 CSS 中，自定義屬性（也稱為變量）是一種非常強大的工具，可以使我們在整個樣式表中一次性定義一個值，然后在需要使用這個值的任何地方使用它。

:root {
--main-color: #f00;
}
.box {
background-color: var(--main-color);
}

上述代碼將定義一個名為“main-color”的變量，并將其設置為紅色。然后，我們在 .box 類中使用 var() 函數，使該元素的背景顏色等于我們指定的 main-color 自定義屬性。

然而，需要注意的是，CSS 變量支持仍然存在兼容性問題。雖然絕大多數現代瀏覽器都支持 CSS 變量，但在舊版本的瀏覽器或某些過時的移動瀏覽器中，有可能無法正確解析它們。

這也意味著當您在跨瀏覽器或跨設備之間使用 CSS 變量時，您可能需要考慮降級或其他備選方案來確保您的站點或應用程序在老式瀏覽器中仍然可以正常運行。

.box {
background-color: #f00; /* Fallback if CSS variables are not supported or not defined */
background-color: var(--main-color);
}

上面這個示例中，當瀏覽器不支持 CSS 變量或在主顏色變量沒有定義的情況下，我們使用傳統的 background-color 定義顏色屬性作為后備。

因此，雖然 CSS 變量是一項有用的功能，但在跨瀏覽器或跨設備之間使用時，仍然需要謹慎處理。