[TOC] <br/><br/><br/> # <b style="color:#4F4F4F;">简介说明</b> ``` 版本：内置函数 作用：内置函数 ``` <br/> # <b style="color:#4F4F4F;">变量</b> <br/> # <span style="color:#619BE4">currentColor</span> ***** 使用该关键字的元素的（或其最近父元素）color属性的颜色值 <br/> # <b style="color:#4F4F4F;">函数</b> <br/> # <span style="color:#619BE4">attr()</span> ***** 允许 CSS 接受属性值的控制 <br/> # <span style="color:#619BE4">[fut]-element()</span> ***** 从任意的 HTML 元素中生成的图像 image 值 <br/> # <span style="color:#619BE4">selector()</span> ***** 选取目标dom元素 <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">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/>