CSS - CSS中常用函数和补充

white-space

white-space用于设置空白符(例如空格，tab制表符，换行等)的处理方式和换行规则

white-space是一个可以用来设置文本是否换行的属性，而文本相关的属性都是可继承属性

所以white-space也是一个可继承属性

值	空白符	换行	备注
normal	合并所有空白符	超出时候自动换行	默认值
nowrap	合并所有空白符	超出时候不自动换行
pre	不合并所有空白符	超出时候不自动换行	pre是preserve(保存)的简写
pre-wrap	不合并所有空白符	超出时候自动换行
pre-line	合并除换行符之外的所有空白符号	超出时候自动换行

text-overflow

text-overflow通常用来设置文字溢出时的行为，所以text-overflow属性一般会结合overflow:hidden一起来进行使用

值	说明
clip	溢出的内容直接裁剪掉 默认值 字符可能会显示不完整
ellipsis	溢出那行的结尾处用省略号表示

css中的一些函数

CSS中有许许多多的函数，例如rgb/rgba/translate/rotate/scale等

这些CSS函数通常可以帮助我们更加灵活的来编写样式的值

var 函数

使用var函数，可以帮助我们在CSS中定义变量

<style>
  .container {
  	/* 
    	CSS中定义属性名的时候 
    	属性名需要以两个减号(--)开始
	   	属性值则可以是任何有效的CSS值
  	*/
    --theme-color: blue;
  }

  .box {
    /* 
    	在使用css变量的时候，需要使用var函数 
    	var函数的第一个参数 为 需要使用的变量名称
    	自第二个参数开始 为后备属性值 
    	即当前一个属性值不生效的时候，会自动使用后一个属性值
    */
    color: var(--theme-color, red);
  }
</style>

<div class="container">
  lorem
  <div class="box">Lorem, ipsum.</div>
</div>

在CSS中，定义的变量，其作用域为当前定义的元素及其子元素

所以有的时候，在定义一些全局CSS变量的时候，我们会将其定义到html元素选择器或:root选择器中

:root {
  --theme-color: blue
}

.container {
  color: var(--theme-color);
}

.box {
  color: var(--theme-color);
}

calc 函数

calc() 函数允许在声明 CSS 属性值时执行一些简单的计算

• 计算支持加减乘除的运算
• calc函数支持 px，%，em和rem， vw，vh之间的相互计算
  • 在进行加法或减法运算的时候，等式中所有的表达式都必须有对应的单位，不可以是纯数值类型
  • 在进行乘或者除运算的时候，等式中只能在第一个计算值可以具有对应的单位，其余值必须是纯数值类型
  • 在运算符的左右两边必须存在空格
• calc函数通常被用来设置一些元素的尺寸或者位置

.container {
  width: 600px;
  height: 600px;
  background-color: gray;
}

.box {
  background-color: skyblue;
  /* 在使用calc函数进行计算的时候，运算符和数值之间必须存在一个空格 */
  width: calc(100% - 100px);

  /*
    100% 等价于 div.box的height值被设置为100%
    也就是div.box的包含块(在这里是div.container)宽度的100%
    所以calc(100% - 100px)等价于600px-100px -> 500px
  */
  height: calc(100% - 100px);
}

blur 函数

blur 函数用于在图片或者在某个元素及其所有的子元素上添加对应的高斯模糊

blur函数通常会和filter或backdrop-filter属性一起使用

函数名	作用
filter	为图片，元素添加不同效果的滤镜效果
backdrop-filter	为元素后面的区域添加模糊或者其他效果 也就是为当前元素的底层元素添加对应的滤镜效果

.box {
  width: 300px;
  height: 300px;
 	/*
  	filter具体的值可以在
  		https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
  	进行查看
  */
  
  /* 添加灰白滤镜 */
  /* filter: grayscale(0.8); */

  /* 添加高斯模糊 --- 参数为模糊半径 --- 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊 */
  filter: blur(2px);
}

.box {
  position: relative;
  display: inline-block;
}

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  /*
  	filter是给当前元素及其子元素设置滤镜效果
    backdrop-filter是给当前元素下边的元素设置滤镜效果
  
    所以为了看到对应的效果
  	backdrop-filter在设置滤镜的时候
  	一般要求当前元素为透明或半透明
  */
  backdrop-filter: blur(5px);
}

img {
  display: block;
}

gradient 函数

CSS的<image>数据类型描述的是2D图形

<gradient> 是<image>的子类型，用于表现两种或多种颜色的过渡转变

所以在CSS中，渐变的本质其实就是图片

函数名	功能
linear-gradient	线性渐变 --- 创建一个表示两种或多种颜色线性渐变的图片
radial-gradient	径向渐变 --- 创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成

线性渐变

/* 默认渐变 --- 渐变方向是从上往下进行渐变的 */
background-image: linear-gradient(red, blue);

/* linear-gradient 第一个参数可以指定渐变方向 */
background-image: linear-gradient(to right,red, blue);

background-image: linear-gradient(to right top,red, blue);

background-image: linear-gradient(-45deg,red, blue);

background-image: linear-gradient(to right, red, yellow 25%, green 100px, blue);

径向渐变

/* 默认的径向渐变 --- 渐变点是图像的中心点 */
background-image: radial-gradient(red, blue);

/* 第一个参数为 渐变点的位置 */
background-image: radial-gradient(at 0 50%, red, blue);

background-image: radial-gradient(at 0% 150px, red, blue);

background-image: radial-gradient(at top center, red, blue);

重复线性渐变

重复线性渐变的设置方式和线性渐变一致，唯一的区别是重复线性渐变会一直重复，直到渐变为整个容器

线性渐变

background-image: linear-gradient(45deg, blue, red 25%);

重复线性渐变

background-image: repeating-linear-gradient(45deg, blue, red 25%);

重复径向渐变

重复径向渐变的设置方式和径向渐变一致，唯一的区别是重复径向渐变会一直重复，直到渐变为整个容器

径向渐变

background-image: radial-gradient(blue, red 25%);

重复径向渐变

background-image: repeating-radial-gradient(blue, red 25%);