CSS中的常见函数-全解

坚持@success

已于 2024-01-19 10:24:09 修改

阅读量887

点赞数 26

分类专栏：前端文章标签： html 前端框架 linux css

于 2024-01-19 10:22:07 首次发布

本文链接：https://blog.csdn.net/m0_72210904/article/details/135690991

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS变量

常见函数

倒影效果

CSS变量

在 CSS3 中支持定义变量，然后可以在不同的地方来使用这个变量所对应的值。它的好处就是可以减少代码的编写，从而提交代码的复用性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS变量</title>
    <style>
        /* 定义变量，在 CSS 中定义变量是使用两根横线，后面紧跟变量名 */
        :root {
            --mycolor: #0000ff;
        }
        .box {
            color: var(--mycolor);
        }
        .box1 {
            color: var(--mycolor);
        }
        .box2 {
            color: black;
        }
    </style>
</head>
<body>
需求：第一个 div 和第二个 div 中内容的颜色为红色， 第三个为黑色。
<div class="box">这是div块</div>
<div class="box1">这是第二个块</div>
<div class="box2">这是第三个块</div>
</body>
</html>

要注意：变量只能是用于值的地方，而不能用到属性的地方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS变量</title>
    <style>
        /* 定义变量，在 CSS 中定义变量是使用两根横线，后面紧跟变量名 */
        :root {
            --mycolor: #0000ff;
            --mycolor1: color;
            --myellow: yellow;
        }
        .box {
            color: var(--mycolor);
        }
        .box1 {
            color: var(--mycolor);
        }
        .box2 {
            /*color: black;*/
            var(--mycolor1): yellow;  /* 无效果 */
            color: var(--myellow);
        }
    </style>
</head>
<body>
需求：第一个 div 和第二个 div 中内容的颜色为红色， 第三个为黑色。
<div class="box">这是div块</div>
<div class="box1">这是第二个块</div>
<div class="box2">这是第三个块</div>
</body>
</html>

常见函数

函数	描述	CSS 版本
attr()	返回选择元素的属性值。	2
calc()	允许计算 CSS 的属性值，比如动态计算长度值。	3
cubic-bezier()	定义了一个贝塞尔曲线(Cubic Bezier)。	3
hsl()	使用色相、饱和度、亮度来定义颜色。	3
hsla()	使用色相、饱和度、亮度、透明度来定义颜色。	3
linear-gradient()	创建一个线性渐变的图像	3
radial-gradient()	用径向渐变创建图像。	3
repeating-linear-gradient()	用重复的线性渐变创建图像。	3
repeating-radial-gradient()	类似 radial-gradient()，用重复的径向渐变创建图像。	3
rgb()	使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。	2
rgba()	使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。	3
var()	用于插入自定义的属性值。	3

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见函数的使用</title>
    <style>
        body {
            background: #cccccc;
        }
        div {
            position: absolute;
            top: 30px;
            left: 5px;
            width: calc(100% - 50px);
            height: 200px;
            background: rgba(0, 200, 200, .9);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

倒影效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒影效果</title>
    <style>
        .box {
            width: 500px;
            height: 200px;
            border: 1px solid #cccccc;
            -webkit-box-reflect: below 2px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));
        }
    </style>
</head>
<body>
<div class="box">
    <img src="image/5.jpeg" width="500">
</div>
</body>
</html>