文章目录
- CSS中的函数
- css函数–var
- css函数–calc
- css函数–blur
- css函数–gradient
- linear-gradient的使用
CSS中的函数
◼ 在前面我们有使用过很多个CSS函数:
比如rgb/rgba/translate/rotate/scale等;
CSS函数通常可以帮助我们更加灵活的来编写样式的值；
◼ 下面有几个非常好用的CSS函数:
var: 使用CSS定义的变量;
calc: 计算CSS值, 通常用于计算元素的大小或位置;
blur: 毛玻璃(高斯模糊)效果;
gradient：颜色渐变函数；
css函数–var
CSS中可以自定义属性
属性名需要以两个减号（–）开始;
属性值则可以是任何有效的CSS值
我们可以通过var函数来使用
上面写是用不了的
.box {
color: var（–main-color);
}
.title {
color: var（–main-color);
}
用var函数进行调用
规则集定义的选择器, 是自定义属性的可见作用域(只在选择器内部有效)
所以推荐将自定义属性定义在html中，也可以使用 :root 选择器;
css函数–calc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 300px;
height: 100px;
background-color: orange; }
.item{ height: 50px;
}
.item1{ width: calc(300px - 100px); background-color: #f00;
}
.item2{ width: 100px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
</div>
</body>
</html>
现在剥削盒子里面有两个item，如果用flex:1可以进行占用剩余空间，如果不用flex属性。简单的计算也是可以的，box的width为300px，item要为100px固定尺寸，那么item为300px➖100px，但是在item1里设置300px➖100px是不生效的，这时候要使用calc函数，
.item1{width:calc(300px-100px)就可以显示在浏览器上
但是如果父元素改变了width，下面的width都得改变，非常麻烦，这时候在子元素设置width:calc（100%减100）这里设置width100%是相对于父元素的视口（宽度）
item的包含块是inner，如果我设置box的position是relative，item的Postion设置absoulte，那么是相对于box还是inner呢？
这里是相对于box，原因item设置为absoulte脱离了标准流，离我最近的是box所以是相对于box，所以包含块是box，注意
clac要求➖号两边必须留空格
box里面两个div（item1和item）没有在一行原因是空格符造成的，消除！空格符影响即可，小编在HTML元素语义化（二）提到几种解决方式！！
css函数–blur
blur() 函数将高斯模糊应用于输出图片或者元素;
blur(radius)
（网易云/各大网站轮播图后面的模糊照片)
radius, 模糊的半径, 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊;
◼ 通常会和两个属性一起使用：
filter: 将模糊或颜色偏移等图形效果应用于元素;
backdrop-filter: 为元素后面的区域添加模糊或者其他效果;
例如img
{filter:blur（5px)；}
但是我们在开发中不会这样用
<style>
.box { display:inline-block;
postion:relative;}
.cover{postion:relative;
left0;
bottom:0;
top:0;
right:0；
background-color:rgba(0,0,0,.8)
</style>
<body>
<div class="box">
<img src="" alt="">
<div class="cover"></div>
</div>
这样一般在开发中用，遮盖在照片上。但是用background–color，颜色不是特殊的，这时候css提供了backdrop–filter:blur（5px）用法进行设置在cover上的高斯模糊。
但是想要有透明度，还需要增加background–color:rgba（）在高斯模糊基础上再一次增加透明度。
手机端音乐等软件高斯模糊是非常常见的!
css函数–gradient
渐变方式是从上到下的，在开发中渐变常见的是从左向右进行渐变
background-image: linear-gradient(to right ,red,blue);
从左下到右上渐变
background-image: linear-gradient(to right top ,red,blue);
linear-gradient的使用
linear-gradient：创建一个表示两种或多种颜色线性渐变的图片；
radial-gradient：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；
