CSS 包含了許多函數，而且它能夠完成許多早期需要用 JavaScript才能完成的事情。每年都有新的特性加入進來，這讓我們的開發更加輕鬆，也減少了對JavaScript的依賴。 CSS 函數是它所具有的最強大的特性之一，在本文中，我將介紹一些我認為有用的函數。
（學習影片分享：css影片教學）
attr 函數用於取得所選元素的屬性值。它接受三個參數，屬性名稱，類型和預設值。
語法：
attr( attribute-name <type-or-unit>? [, <fallback> ]? )
範例：
<p data-text="the attr function" data-tooltip="Hi from attr!" class="attr">This text is combined with</p>
css
p::after {
content: ' ' attr(data-text);
}
p.attr:hover::after {
content: ' ' attr(data-tooltip);
background-color: orange;
color: white
}效果：
##原始碼：https://codepen.io/protic_milos/pen/GRpYJKd
calc()這個函數讓我們能夠計算CSS值，而不是指定確切的值。通常用於計算元素的大小或位置。它支援加法、減法、乘法和除法。
是
和-
/
運算子不有此限制，但出於一致性的考慮，建議添加空格。 另外，很棒的是，我們可以混合CSS單位，例如，我們可以減去百分比和像素。我們可以用calc
<p class="calc">Centered with calc</p>
p.calc {
padding: 10px;
background-color: orange;
color: white;
width: 200px;
text-align:center;
margin-left: calc(50% - 100px)
}var函數重複使用該屬性值。 與CSS變數一起，該函數提高了可維護性並減少了重複。一個用例是為網站創建主題。
:root {
--bg-color: green;
--color: white
}
p.var {
background-color: var(--bg-color);
color: var(--color)
}
就我個人而言，我從未使用過這種方法，但它看起來很有趣。這個函數傳回指定計數器的目前值，需要與 counter-reset
counter-increment
搭配使用。 我們可以用它來計算其他元素，例如有序列表。<div class="counter"> <span>Mars</span> <span>Bounty</span> <span>Snickers</span> </div>
# 原始碼：https://codepen.io/protic_milos/pen/GRpYJKdcircle()這個函數會建立一個圓形區域來屏蔽它所應用的元素。你可以指定它的半徑和位置。通常與圖像一起使用來創建圓角形狀。此函數是clip-path屬性值。
另外，值得一提的是，除了圓形之外，您還可以建立橢圓形和多邊形形狀。 ###<img class="circle" src="https://devinduct.com/Uploads/PostImages/1122dcb9-954a-4641-9ca6-c38e9472698f.png" />
img.circle {
clip-path: circle(30%);
}以上是5個有用的css函數（分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
