CSS常用函数补充(var、clac、blur、gradient)

最新推荐文章于 2024-05-30 08:59:32 发布

小洋人最happy

最新推荐文章于 2024-05-30 08:59:32 发布

阅读量1k

点赞数

分类专栏：前端文章标签： var calc blur gradient linear-gradient

本文链接：https://blog.csdn.net/u010358168/article/details/128159603

版权

前端专栏收录该内容

20 篇文章 11 订阅

订阅专栏

文章目录

一、var

1.1 简介

使用CSS定义的变量或属性

1.2 使用

在CSS中可以自定义属性，属性名需要以两个减号(--)开始，属性值可以是任何有效的CSS值

自定义属性如下:

html{
  --main-color: red;
}

通过var函数使用自定义属性：

span{
  color: var(--main-color);
}

1.3 规则

规则集定义的选择器，是自定义属性的可见作用域(只在选择器内部有效)，因此推荐将自定义属性定义在html中，也可以使用:root选择器

二、calc

2.1 简介

计算CSS值，通常用于计算元素的大小或位置
＋－ ✖️ ÷运算符的两边必须要有空白字符

2.2 使用

.box{
  width: calc(100% - 100px);
  height: 120px;
  background-color: pink;
}

三、blur

3.1 简介

将高斯模糊应用于图片或元素
blur(radius)：radius，模糊半径，用于定义高斯函数的偏差值，偏差值越大，图片越模糊

3.2 使用

通常会结合两个属性一起使用：

filter：将模糊或颜色偏移等图形效果应用于元素
backdrop-filter：为元素后面区域添加模糊或其他效果

3.2.1 filter

原始代码：

<body>
  <img src="./assets/images/c.webp" alt="">
</body>

显示如图：
在这里插入图片描述
当给img应用filter: blur()属性时：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      filter: blur(5px);
    }
  </style>
</head>

<body>
  <img src="./assets/images/c.webp" alt="">
</body>

</html>

模糊效果如下：
在这里插入图片描述

3.2.2 backdrop-filter

backdrop-filter设置时，通常会与background-color结合使用(设置透明度)，否则效果同filter是一致的。
代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* img {
      filter: blur(5px);
    } */
    .box {
      position: relative;
      display: inline-block;
    }

    .cover {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, .5);
      backdrop-filter: blur(5px);
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./assets/images/c.webp" alt="">
    <div class="cover"></div>
  </div>
</body>

</html>

显示效果如下：
在这里插入图片描述
这就有点类似网易云毛玻璃效果了。

四、gradient

4.1 简介

<gradient>是一种<image>CSS数据类型的子类型，用于表现两种或多种颜色的过度转变

CSS的<image>数据类型描述的是2D图形
如background-image、list-style-image、border-image、content等
<image>常见的方式是通过URL来引入一个图片资源
也可以通过CSS的<gradient>函数来设置颜色的渐变

<gradient>常见的函数实现有：

linear-gradient：创建一个表示两种或多种颜色线性渐变的图片
radial-gradient：创建一个图像，改图像是由原点发出的两种或多种颜色之间的逐步过度组成
repeating-linear-gradient：创建一个由重复性渐变组成的<image>
repeating-radial-gradient：创建一个重复的原点触发渐变组成的image

4.2 使用

4.2.1 linear-gradient

线性渐变在开发中比较常用，演示如下：

默认方向：

<style>
 .box {
   width: 200px;
   height: 100px;
   background-image: linear-gradient(red, blue);
 }
</style>

<body>
  <div class="box"></div>
</body>

效果如下：
在这里插入图片描述
自左向右：

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

在这里插入图片描述
左上角到右下角：

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

在这里插入图片描述
按角度：

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

在这里插入图片描述
多种颜色：

background-image: linear-gradient(to right, red, blue 30%, orange 60%, pink);

在这里插入图片描述

4.2.2 radial-gradient

从中心点往外渐变，演示如下：

默认中心点：

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

在这里插入图片描述
设置中心点：

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

在这里插入图片描述

小洋人最happy

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
CSS常用函数补充(var、clac、blur、gradient)

CSS中常用函数补充(var、calc、blur、gradient)，简介及使用演示
复制链接

扫一扫

专栏目录