在前端開發中，CSS是一種必不可少的樣式語言，它可以讓頁面美觀、易讀以及有效地與用戶交互。而CSS3則是CSS的一個重要版本，它為我們帶來了更多的功能和效果。

其中，cale()是CSS3中新增的一個函數，用于指定一個元素的縮放比例。它可以讓元素從原本大小逐漸縮小至指定比例的大小。

/* 設置元素寬高為100px */
.box{
width: 100px;
height: 100px;
}
/* 元素默認縮放比例是1，即不縮放 */
.box:hover{
transform: scale(0.5); /* 設置鼠標懸浮時縮放為原來的一半大小 */
}

在上述代碼中，我們首先聲明一個元素的寬高為100px，然后使用cale()函數來指定元素的縮放比例。鼠標懸浮在該元素上時，元素就會縮放至原來的一半大小。

除了指定一個具體的縮放比例外，cale()函數還可以接受兩個參數，分別指定水平和垂直方向上的縮放比例。如：

.box{
width: 100px;
height: 100px;
}
.box:hover{
/* 設置水平方向上縮放為原來的1.5倍，垂直方向上縮放為原來的0.5倍 */
transform: scale(1.5, 0.5); 
}

上述代碼中，我們設置鼠標懸浮時元素水平方向上縮放為原來的1.5倍，垂直方向上縮放為原來的0.5倍。

總的來說，cale()函數是一個很有趣且實用的特性，它可以讓我們用更簡單的方式實現復雜的效果。但是需要注意，過度使用縮放效果可能會影響頁面性能和用戶體驗，需要謹慎使用。