目录
????????在 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>