CSS中常用函数和渐变效果

Posted 2022-08-10 公众号_前端每日技巧

calc

calc()函数支持加减乘除四种运算，很多类型都可以使用calc()函数，例如​​angle​​、​​length​​、​​frequency​​、​​time​​，​​percentage​​、​​number​​、​​integer​​，因为calc()有很多约束，所以这些类型不一定都可以出现calc()函数。

我们在calc()函数中不能使用当前css属性不支持的数据类型。

// 下面这些都是不合法的
width: calc(100% - 4deg);
width: calc(12s - 10);

我们在calc()函数中，运算符前后带百分比或者单位的值不能进行乘除运算，只能进行加减运算。除法运算斜杠右侧必须是不为0的数值类型。calc()书写上也有一定限制的，减号和加号两边一定要有空格。乘法和除法符号两侧不需要空格，但是为了格式一致，我们一般使用空格隔开。

我们一般只需要定义一个CSS的属性，让其他CSS样式基于这个属性进行构建，然后我们就可以通过javascript代码操作CSS的属性值，就可以在整个网页中去动态变化。

min和max和clamp函数

从语法上看，和calc()函数类似，任何可以使用​​angle​​、​​length​​、​​frequency​​、​​time​​，​​percentage​​、​​number​​、​​integer​​数据类型的地方都可以使用min()、max()、clamp()函数，而且min()、max()、clamp()这三个函数与calc()函数是可以相互嵌套使用的。 demojs

width: calc(min(600px, 87vw) / 3);

​​min()​​函数支持一个或多个表达式，每个表达式之间使用逗号分割，将最小的表达式的值作为返回值。而且min()函数的表达式可以是数学表达式，例如算术运算符。

width: min(11px * 11, 11rem);
width: min(calc(22px * 43), 88em);
width: min(75px * 43, var(--width))

​​width: min(11vw, 6em, 81px)​​中出现了2个相对长度，1个固定长度值，所以width计算值最大的就是81px, 但是实际的宽度值我们要根据浏览器视口宽度去判断，当浏览器的视口宽度小于800px, 或者文字字号小于16px， 真实的宽度值就会更小，这个意思是说，虽然我们函数的名称是min()用来表示更小，但是这个函数用来限制最大值的。

​​max()​​函数和min()函数语法类似，主要区别是max()函数返回的是最大值，而min()函数返回的是最小值。​​width: max(11vw, 6em, 80px)​​其中最小宽度是80px, 但是如果浏览器宽度大于800px，或者文字字号大于16px，则最终的宽度会很大，这个意思就是说，虽然max()表示最大值，但是它的作用是限制最小值的，这就和min()是相反的，除此之外max()函数其他特性和min()都是相似的。

​​clamp()​​函数的作用是返回一个区间范围的值。语法使用：​​clamp(MIN, VAL, MAX)​​，其中MIN表示最小值，VAL表示首选值，MAX表示最大值，意思是VAL在MIN和MAX范围内，则使用VAL作为函数返回值，如果VAL大于MAX，则使用MAX作为返回值，如果VAL小于MIN，则使用MIN作为返回值，所以clamp(MIN, VAL, MAX)实际上等同于max(MIN, min(VAL, MAX))。

CSS渐变

linear-gradient()线性渐变

简单效果，从上到下，从黑色到红色的渐变效果实现：

linear-gradient(black, red);

linear-gradient默认是自上而下的，不需要指定角度，所以在所有线性渐变语法中，to bottom都是多余的。

// 这里的to bottom就是多余的
linear-gradient(to bottom, black, red)

如果不是自上而下而是其他方向的就需要我们去指定渐变的方向，渐变的方向有两种表达方式，一种是使用关键字to+方位，一种是直接使用角度值。

// 使用to + 方位
linear-gradient(to right, black, red);
// 直接赋值角度值
linear-gradient(66deg, black, red);

我们在项目中会多次使用"to + 方位值"，一方面是让我们更容易理解和记忆，一方面是因为项目中的渐变效果不是对角渐变，就是水平或者垂直渐变，更适合使用"to + 方位值"这种写法，而且这种写法实现的渐变效果不会受到元素尺寸的限制。

我们再看看渐变的起点和重点，当我们理解了CSS渐变的角度值对应的方位，再去理解线性渐变的起点和重点的位置，就会理解线性渐变渲染效果。

.wrapper 
    width: 66px;
    heigth: 144px;
    border: 1px solid #ccc;
    background-image: linear-gradient(45deg, black 100px, red 100px 155px, white 155px);

上面代码中的100px的起点位置不是从端点开始的，也不是从元素的某一边进行开始的，而是沿着渐变角度所在的直线的垂直线开始的。如果渐变断点中出现了百分比值，这个百分比值就是相对渐变的起点到终点的距离计算出来的。

我们在渐变中还会遇到​​color-stop-list​​数据类型，这也就是我们用到的渐变断点，渐变断点至少有2个颜色值，而且断点语法中的颜色值和位置值的前后顺序也是有要求的，颜色值必须在位置值的前面。

// 错误写法
linear-gradient(black);
linear-gradient(black, 33% red);
//正确写法
linear-gradient(black, red 33%);

当没有指定具体断点位置的时候，各个渐变颜色所形成的色块大小是自动等分的。如果起点和终点的颜色与相邻断点的颜色值一样，那么起点色值和终点色值是不用写出来。

我们在同一个渐变中，不同类型的断点位置是可以同时使用的，渐变的断点位置也可以是负数或者大于100%。

但是当存在多个渐变断点的时候，前面的渐变断点位置值有时候会比后面的渐变断点设置的位置值要大，这个时候后面的渐变断点位置值会按照前面的断点位置值进行计算。

linear-gradient(red 10px, pink 1px, green 55px);

渐变断点还支持一次性设置两个位置值，除此之外，我们也可以设置颜色的转换点位置。

linear-gradient(red, 66%, green);

注意：当我们不是高清显示器，在谷歌浏览器中，不同颜色位于同一断点位置的时候，两个颜色的连接处可能会有明显的锯齿。