CSS学习--函数

函数

calc()

calc() 函数用于动态计算长度值。

1. 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
2. calc()函数支持 "+", "-", "", "/" 运算

#div1{
	position: relative;
	width: calc(100% - 100px);
	margin: 0 auto;
}

rotate()

旋转一定角度

#div1{width:100px;height:100px;background-color:pink;margin: 50px;
/* Rotate div */
transform:rotate(60deg);}

rgb()

rgb() 函数使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。

color: rgb(255,0,0);hsl()

hsl()

函数使用色相 (0 到 360)、饱和度、亮度来定义颜色。

color: hsl(120, 60%, 70%);

url()

url('URL') 指向图像的路径。

background-image: url('./../1.jpg');

linear-gradient()

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

linear-gradient(direction, color-stop1, color-stop2, ...);         
/* 设置带有透明度的渐变色 */                                         
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));

minmax()

定义了一个长宽范围的闭区间， 它与CSS网格布局一起使用。

minmax(<min>,<max>)

<min>: <length> | <percentage> | auto | max-content | min-content;

<max>: <length> | <percentage> | <flex> | auto | max-content | min-content;

1. 如果 最大值 < 最小值，则最大值被忽略并且minmax(最小值,最大值)被看成最小值。
2. flex值作为最大值时设置网格轨道的弹性系数；作为最小值时无效。

repeat()

表示轨道列表的重复片段，允许以更紧凑的形式写入大量显示重复模式的列或行。

/* 重复三次，每次都是1个1fr的格子，最后一个剩余宽度格子 */
/* [col-start]和[col-end]只是一个自定义的网格线命名 */
grid-template-columns: repeat(3, [col-start] 1fr [col-end]) auto;
/* min-content和max-content尺寸是根据内容来的 */
grid-template-columns: repeat(2, min-content auto max-content) auto;
/* minmax(min, max)函数表示当前这个格子的尺寸范围在min到max之间 */
grid-template-columns: repeat(2, minmax(min-content, max-content) 40px) auto;
/* 当容器有剩余宽度时，最后会有一些空的格子占位*/
/* 当我们使用auto-fill自动填充的时候，repeat()函数是不能和auto一起使用的 */
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) 20%;
/* 当容器有剩余宽度时，最后会有一些空的格子占位，不同于auto-fill的是，这些格子会折叠成1个且宽度为0 */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));