calc() 函数用于动态计算长度值
。
①：
运算符前后都需要保留一个空格，例如：
width: calc(100% - 10px)；
②：
任何长度值都可以使用
calc()
函数进行计算；
③：
calc()
函数支持 "+", "-", "*", "/" 运算；
④：
calc()
函数使用标准的数学运算优先级规则；
例：
创建一个横跨屏的
div
,两边各有
50px
的间隙
用绝对定位，（
margin-left
等控制的宽度会有变化 ）控制
div
距左边
50px
,控制其宽度为屏幕宽度的
100%
减去
100px
,减掉的
100px
包含距离左边的
50px
,也控制了距离右边
50px
。
<h3 class="test-calc">测试calc</h3>
复制代码
.test-calc{
background-color:yellow;
border:1px solid red;
position:absolute;
top:100px;
left:50px;
width:calc(100% - 100px);
padding:5px;
复制代码
2. attr( )函数
·
attr() 函数返回选择元素的属性值。
<div><a href="https://www.baidu.com/">百度一下</a></div>
<div class="test-attr" data-id="task-id111">返回选择元素的属性值：</div>
复制代码
a:after{
content:"("attr(href)")";
font-size: 12px;
color: rgb(107, 177, 243);
margin-left: 10px;
.test-attr:after{
content: ""attr(data-id)"";
color:red;
font-size: 18px;
复制代码
前后对比：
3. linear-gradient() 函数
·
linear-gradient() 函数用于创建一个线性渐变的 "图像"。
为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。
.
从左上角到右下角的线性渐变:
.test-linear-gradient{
width: 150px;
height: 50px;
从左上角到右下角的线性渐变:
background: linear-gradient(to bottom right, lightblue,lightyellow);
复制代码
· 线性渐变指定一个角度:
.test-linear-gradient{
width: 150px;
height: 50px;
background: linear-gradient(360deg,lightblue,lightyellow);
. 使用透明度的线性渐变 （ 通过rgba ）:
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明( 正常 )。
.test-linear-gradient{
width: 150px;
height: 50px;
background: linear-gradient(to right top,rgba(255,0,0,0.1),rgba(255,0,0,1));
复制代码
4. radial-gradient( ) 函数
· adial-gradient() 函数用径向渐变创建 "图像"。
径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。
圆形径向渐变:如下：
颜色结点均匀分布 ：（ 不定义百分比 ）
<div class="test-radial-gradient"></div>
复制代码
.test-radial-gradient{
height:80px;
width:80px;
background:radial-gradient(circle,red,yellow,lightyellow,red);
复制代码
颜色结点不均匀分布：（ 利用百分比 ）
.test-radial-gradient{
width: 100px;
height: 100px;
background:radial-gradient(red 15%,yellow 60%,lightyellow 25%)
复制代码
5. repeating-linear-gradient() 函数
重复的线性渐变函数：
<div class="box"></div>
复制代码
<style>
.box{
height:80px;
width:80px;
background: repeating-linear-gradient(45deg,red , yellow 50%, lightyellow 30%);
</style>
6. repeating-radial-gradient() 函数
重复的径向渐变函数：
<div class="test-repeating-radial"> </div>
复制代码
.test-repeating-radial{
height:80px;
width:80px;
background: repeating-radial-gradient(red 20%, yellow 50%, lightyellow 60% );
7. var() 函数
这里需要了解一下 自定义属性（-*）：CSS变量: 在 CSS选择器中声明, 变量名必须以两个破折号 （-）开头，如：--mode-bg_color; 区分大小写。对于全局范围，您可以使用：root或body`选择器。
即，前缀为的属性名称--（如--example-name）表示自定义属性，这些自定义属性包含一个可以在使用该var() 函数的其他声明中使用的值。
声明一个自定义属性 （ CSS变量 或者 级联变量）语法：
element {
--main-bg-color: lightblue;
复制代码
使用该变量 ( 用 css函数 var() ) ：
.test1{
background-color: var(--main-bg-color);
复制代码
注意：
:root 是一个 CSS 伪类，它代表文档的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。
var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
语法 ： **var(变量名, 变量值 )**第二个参数，“变量值”可写可不写，是一个备用值，在属性不存在的时候使用
<div class="test-css_var"></div>
复制代码
:root{
--mode-bg_color:lightblue;
.test-css_var{
width: 100px;
height: 100px;
background: var(--mode-bg_color);
8. cubic-bezier() 函数
定义了一个贝塞尔曲线(Cubic Bezier)。
它可以实现，ease-in等动画效果 ，cubic-bezier(.42, 0, 1, 1)的效果等同于ease-in
cubic-bezier的功能演示，参考：wow.techbrood.com/fiddle/2801…
cubic-bezier() 效果，参考链接：cubic-bezier.com，
最初提到该地址的博客是：blog.csdn.net/lucky541788…
css 动画中 ease,seae-in,ease-in-out,ease-out,效果区别
参考博文链接： blog.csdn.net/Candy_10181…，
博主做了如下表格的总结：
.red { color: rgb(255,0,0); }
复制代码
10. rgba()函数
rgba() 使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。
.red { color: rgb(255,0,0,0.3); }
复制代码
11. hsl()函数
使用色相、饱和度、亮度来定义颜色。
/* <p id="p2">浅绿</p> */
12. hsla()函数
使用色相、饱和度、亮度、透明度来定义颜色。
