[TOC] <br/><br/><br/> # <b style="color:#4F4F4F;">簡介說明</b> ``` 版本：內置函數 作用：內置函數 ``` <br/> # <b style="color:#4F4F4F;">變量</b> <br/> # <span style="color:#619BE4">currentColor</span> ***** 使用該關鍵字的元素的（或其最近父元素）color屬性的顏色值 <br/> # <span style="color:#619BE4">min-content</span> ***** 關鍵字表示內容的最小固有尺寸 <br/> # <span style="color:#619BE4">max-content</span> ***** 關鍵字表示內容的最大固有尺寸 <br/> # <b style="color:#4F4F4F;">函數</b> <br/> # <span style="color:#619BE4">[fut]-element()</span> ***** 從任意的 HTML 元素中生成的圖像 image 值 <br/> # <span style="color:#619BE4">[fut]-selector()</span> ***** 選取目標dom元素 <br/> # <span style="color:#619BE4">attr()</span> ***** 允許 CSS 接受屬性值的控制 <br/> # <span style="color:#619BE4">image-set()</span> ***** 讓瀏覽器從給定集合中選擇最合適的 CSS 圖像的方法，主要用于高像素密度屏幕 <br/> # <span style="color:#619BE4">alpha()</span> ***** 濾鏡設置透明度 <br/> # <span style="color:#619BE4">grayscale()</span> ***** 灰度濾鏡 <br/> # <span style="color:#619BE4">hue-rotate()</span> ***** 旋轉元素及其內容的色相 <br/> # <span style="color:#619BE4">blur()</span> ***** 模糊濾鏡 <br/> ### 示例內容 <span style="color:red">1. 高斯模糊</span> ``` filter: blur(20px) ``` <br/> # <span style="color:#619BE4">contrast()</span> ***** 設置對比度,能實現元素更亮\淡 <br/> # <span style="color:#619BE4">rgb()</span> ***** 設置三色 <br/> # <span style="color:#619BE4">rgba()</span> ***** 設置三色加透明度 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` background: rgba(255,0,0,0.4); ``` <br/> # <span style="color:#619BE4">hsl()</span> ***** 設置色調，飽和度，亮度 <br/> # <span style="color:#619BE4">hsla()</span> ***** 設置色調，飽和度，亮度加透明度 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` background:hsl(320, 100%, 50%,0.4) ``` <br/> # <span style="color:#619BE4">hwb()</span> ***** 表示法根據顏色的色調、白度和黑度來表示給定的顏色。可選alpha組件表示顏色的透明度 <br/> # <span style="color:#619BE4">lab()</span> ***** 表示法表示CIE L*a*b*顏色空間中的給定顏色 <br/> # <span style="color:#619BE4">lch()</span> ***** 表示法表示lch顏色空間中的給定顏色 <br/> # <span style="color:#619BE4">device-cmyk()</span> ***** 表示法用于以獨立于設備的方式表示cmyk顏色，指定青色、品紅色、黃色和黑色組件 <br/> # <span style="color:#619BE4">[fut]-color-mix()</span> ***** 混合兩種顏色 <br/> # <span style="color:#619BE4">[fut]-color-contrast()</span> ***** 獲取一個顏色值，并將其與其他顏色值的列表進行比較，從列表中選擇對比度最高的顏色值 <br/> # <span style="color:#619BE4">linear-gradient()</span> ***** 線性漸變 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 從上到下： background: linear-gradient(red, blue); 從左到右： background: linear-gradient(to right, red , blue); 對角方向： background: linear-gradient(to bottom right, red , blue); 角度方向： background: linear-gradient(180deg, red, blue); 多色點： background: linear-gradient(red, green, blue); ``` <br/> # <span style="color:#619BE4">repeating-linear-gradient()</span> ***** 重復線性漸變 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 重復漸變： background: repeating-linear-gradient(red, yellow 10%, green 20%); ``` <br/> # <span style="color:#619BE4">radial-gradient()</span> ***** 徑向漸變 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 徑向漸變： background: radial-gradient(red 5%, green 15%, blue 60%); shape 參數定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。 background: radial-gradient(circle, red, yellow, green); size 參數定義了漸變的大小。它可以是以下四個值： closest-side，farthest-side，closest-corner，farthest-corner background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); ``` <br/> # <span style="color:#619BE4">repeating-radial-gradient()</span> ***** 重復徑向漸變 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 重復徑向漸變 background: repeating-radial-gradient(red, yellow 10%, green 15%); ``` <br/> # <span style="color:#619BE4">conic-gradient()</span> ***** 創建了一個由漸變組成的圖像，漸變的顏色變換圍繞一個中心點旋轉 <br/> # <span style="color:#619BE4">repeating-conic-gradient()</span> ***** 重復的錐形漸變 <br/> # <span style="color:#619BE4">env() | constant()</span> ***** IOS11新增特性，Webkit的css函數，用于設定安全區域與邊界的距離 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` safe-area-inset-left：安全區域距離左邊邊界的距離 safe-area-inset-right：安全區域距離右邊邊界的距離 safe-area-inset-top：安全區域距離頂部邊界的距離 safe-area-inset-bottom ：安全距離底部邊界的距離 ``` <br/> # <span style="color:#619BE4">var()</span> ***** 定義變量 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` :root { --main-bg-color: coral; } #div1 { background-color: var(--main-bg-color); } #div2 { background-color: var(--main-bg-color); } ``` <br/> # <span style="color:#619BE4">calc()</span> ***** 可以計算值 <br/> ### 示例內容 <span style="color:red">1. 根據百分比進行偏移</span> ``` width: calc(100% - 100px); ``` <br/> # <span style="color:#619BE4">[fut]-calc-size()</span> ***** 函數允許您對內部大小值（如auto、fit content和max content）執行計算 <br/> # <span style="color:#619BE4">max()</span> ***** 選擇最大值 <br/> # <span style="color:#619BE4">min()</span> ***** 選擇最小值 <br/> # <span style="color:#619BE4">clamp()</span> ***** 給一個值限定一個范圍，超出范圍外則使用范圍的最大或者最小值 <br/> # <span style="color:#619BE4">toggle()</span> ***** 允許子孫元素使用取值序列中的值循環替換繼承而來的值 <br/> # <span style="color:#619BE4">counter()</span> ***** 插入計數器。在CSS2.1中counter()只能被使用在content屬性上。 <br/> # <span style="color:#619BE4">matrix()</span> ***** 二維圖形基本幾何變換矩陣 <br/> ### 示例內容 <span style="color:red">1. 具體算法</span> ``` x'=ax+cy+e y'=bx+dy+f 然后需要旋轉多少度就計算出這個度數的cosθ，sinθ就可以達到我們想要的效果啦 transform: matrix(cosθ，-sinθ,sinθ,cosθ,0,0); ```  <br/> # <span style="color:#619BE4">circle()</span> ***** clip-path屬性專用圖形路徑函數，圓形 <br/> # <span style="color:#619BE4">ellipse()</span> ***** clip-path屬性專用圖形路徑函數，橢圓形 <br/> # <span style="color:#619BE4">polygon()</span> ***** clip-path屬性專用圖形路徑函數，多邊形 <br/> # <span style="color:#619BE4">rect()</span> ***** clip屬性專用圖形路徑函數，四個參數代表上 右 下 左 裁剪像素，提供自對象左上角為(0,0)坐標計算的四個偏移數值 <br/> # <span style="color:#619BE4">steps()</span> ***** 定義了一個階梯函數，將輸出值的域以等距的步長劃分 <br/> # <span style="color:#619BE4">cubic-bezier()</span> ***** 三階貝塞爾曲線函數 <br/> ### 示例內容 <span style="color:red">1. 使用方法</span> ``` 四個參數 x1,y1,x2,y2 通過兩個控制點繪制三階貝塞爾運行曲線 ``` <br/> # <span style="color:#619BE4">repeat()</span> ***** 表示軌道列表的重復片段，允許以更緊湊的形式寫入大量顯示重復模式的列或行 該函數可以用于 CSS Grid 屬性中 grid-template-columns 和 grid-template-rows. <br/> ### 示例內容 <span style="color:red">1. 舉例說明</span> ``` /* <track-repeat> values */ repeat(4, 1fr) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end]) repeat(4, [col-start] 1fr [col-end]) repeat(4, [col-start] min-content [col-end]) repeat(4, [col-start] max-content [col-end]) repeat(4, [col-start] auto [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] auto [col-end]) repeat(4, [col-start] min-content [col-middle] max-content [col-end]) // auto-fill 的最后一步：保留空軌道留白，不會折疊空軌道 // auto-fit 的最后一步：折疊空軌道，將空軌道的空間全部平均分配給已有元素的軌道 /* <auto-repeat> values */ repeat(auto-fill, 250px) repeat(auto-fit, 250px) repeat(auto-fill, [col-start] 250px [col-end]) repeat(auto-fit, [col-start] 250px [col-end]) repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end]) repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end]) /* <fixed-repeat> values */ repeat(4, 250px) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) ``` <br/> # <span style="color:#619BE4">minmax()</span> ***** 如果 最大值 < 最小值，則最大值被忽略并且minmax(最小值,最大值)被看成最小值 <br/>