CSS：背景、阴影

CSS：背景、阴影
文章目录
- 渐变
  重复渐变
  径向渐变
  
  阴影
我们在写样式，设置背景效果的时候，是用到了background属性。它是以下几个属性的简写：
1. background-image，指定一个文件或者是生成的颜色渐变作为背景图片；
2. background-position，设置背景图片的初始位置；
3. background-size，指定元素内的背景图片的渲染尺寸；
4. background-repeat，设置需要填充整个元素，是否平铺图片；
5. background-origin，设置背景相对于元素的边框、内边距或者是内容盒子来定位；
6. background-attachment，指定背景图片随着元素上下滚动；
7. background-color，设置纯颜色背景，这个颜色是渲染到背景图片的下方，一般情况在设置背景图片的同时还设置背景颜色，是为了避免背景图片未填充整个元素的时候，设置一个默认的背景颜色；
8. background-clip，设置背景是否应该填充边框、内边距或者内容盒子
渐变

渐变是通过linear-gradient()函数来定义，一般情况下，是设置三个参数：角度、起始颜色、终止颜色。

当然，这并不是一直只设置这三个参数，有时候，可能不需要设置角度值，有时候也可能不需要设置多个颜色值，具体情况根据具体的需求来定。

现在来演示一下渐变的效果：
```
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>Documenttitle>
    <style>
        * {
            margin: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg,red,blue);
        }
    style>
head>

<body>
    <div>div>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
```
div没有任何内容，那么需要设置具体的尺寸，这样设置背景，才能看到效果：

这个效果，角度是设置为45度，两个颜色值。如果设置更多的颜色值：

角度值比较特殊的几个值：

0deg代表垂直向上（相当于to
top），更大的值会沿着顺时针变化，因此90deg代表向右渐变，180deg代表向下渐变，360deg又会代表向上渐变。

角度除了单位deg外，还有：

❑ rad——弧度（radian）。一个完整的圆是2π，大概是6.2832弧度。
❑ turn——代表环绕圆周的圈数。一圈相当于360度（360deg）。可以使用小数来表示不足一圈，比如0.25turn相当于90deg。
❑ grad——百分度（gradian）。一个完整的圆是400百分度（400grad）,100grad相当于90deg。

background-image: linear-gradient(90deg,pink 35%,red 34%,blue 81%);

还有很多的效果，我们可以一一去体验一下。

重复渐变

当我们想要一个重复渐变的效果，但是又不想手动重复设置相同的颜色值的时候，可以通过repeating-linear-gradient()函数来设置。

条纹效果就是通过repeating-linear-gradient()函数来实现的：
```
        div {
            margin: 100px auto;
            width: 450px;
            height: 10px;
            /* background-image: linear-gradient(90deg,pink 35%,red 34%,blue 81%); */
            background: repeating-linear-gradient(45deg,#57b,#aaa 10px,#124 20px);
        }
1
2
3
4
5
6
7
```
径向渐变

径向渐变是从一个点开始，向外扩展的渐变。和线性渐变一样，可以设置多个颜色，使用百分比或者是长度单位指定位置；也可以设置径向渐变为椭圆或者是圆形。
```
background: radial-gradient(red,blue);
1
```
radial-gradient函数设置的径向渐变默认是椭圆，

设置圆形径向渐变：radial-gradient(circle,white,midnightblue)

设置径向渐变的位置：radial-gradient(3em at 25% 25%,white,midnightblue)

设置指定颜色节点位置的径向渐变：radial-gradient(circle,white 0%,midnightblue 75%,red 100%)

重复的径向渐变条纹效果：repeating-radial-gradient(circle,midnightblue 0,midnightblue 1em,white 1em,white 2em )

阴影

阴影是可以给元素添加立体感的特效，在css中，有两个属性可以设置阴影：box-shadow和text-shadow。

box-shadow：设置元素盒子生成阴影
text-shadow：文字生成阴影。
相关阅读:
2311rust,到66版本更新
 更优雅地实现策略模式
 万字解析：vector类
 解读APS及其效益
 MySQL锁详解
 mongoDB 性能优化
 【JavaSE】String类详解(上篇)
宝塔部署nginx遇到的400错误和502错误
 Qt中显示摄像头数据（V4L2三）
带你深入了解屏幕刷新机制
原文地址：https://blog.csdn.net/xuelian3015/article/details/126376600

文章目录

渐变

重复渐变

径向渐变

阴影