CSS3新增-EW帮帮网

一、新增语法

1、长度

rem :Root element meter 根据根文档（ body/html ）字体计算尺寸
vh : View height 可视范围高度，100vh=视口宽度的100%
vw : View width 可视范围宽度，1vw=视口宽度的1%
vmin：视口宽度和高度中较小值的 1%（如竖屏时可能等于 vw，横屏时可能等于 vh）
vmax：视口宽度和高度中较大值的 1%（与 vmin 相反）

2、颜色设置方式

①RGBA颜色

在 RGB 基础上增加了 alpha 通道（透明度），格式为 rgba(红, 绿, 蓝, 透明度)。

前三个值为 0-255 的整数或 0%-100% 的百分比
透明度为 0-1 之间的数值（0 完全透明，1 完全不透明）
示例：color: rgba(255, 0, 0, 0.5);（半透明红色）

②HSLA颜色（有透明度）

基于色相（Hue）、饱和度（Saturation）、亮度（Lightness）和 alpha 通道，格式为 hsla(色相, 饱和度, 亮度, 透明度)。

第一个数字代表色相（色相环角度），60度时为黄色。120度绿色。180度青色。240度蓝色。300度洋红色。360度红色。

色相：0-360 的角度（0 红、120 绿、240 蓝）

第二个数数字代表饱和度。值为百分比。

饱和度 / 亮度：0%-100%（饱和度 0% 为灰色，亮度 0% 为黑色）
示例：background: hsla(120, 100%, 50%, 0.3);（半透明亮绿色）

第三个数字是亮度，值为百分比。

第四个数字是透明度，值为0-1。

hsl(255,90%,50%)

③HSL颜色（无透明度）

与上述的HSLA用法一致，只是没有透明度

④十六进制扩展（透明度）

CSS3 允许在 6 位十六进制颜色后添加 2 位表示透明度，格式为 #RRGGBBAA 或简写 #RGBA。

前 6 位表示 RGB 颜色，后 2 位表示透明度（00 完全透明，FF 完全不透明）
示例：#ff000080（与 rgba (255,0,0,0.5) 等效）

⑤transparent

⑥filter（滤镜）

定义颜色完全透明

用法：color: transparent；

3、文本属性

①text-indent（文本缩进）

可以讲段落第一行进行缩进（首行缩进）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        p{
            /* 常用的文本缩进单位 */
            text-indent: 2em;
            text-indent: 1%;
            text-indent: 20px;
        }
    </style>
</head>
<body>
    <h4>标题</h4>
    <p>城市，是文明的容器，更是历史的见证。文脉赓续，是城市内涵式发展不能丢失的一份坚守。</p>
</body>
</html>

②text-align（文本对齐）

text-align设置文本水平对齐方式

left：内容左对⻬。（默认效果）
center：内容居中对⻬。
right：内容右对⻬。
justify：内容两端对⻬，对最后⼀⾏⽆效（如果只有一行，也不生效）

注意：在justify无效时，可以使用text-align-last：justify，最后一行对齐方式，单行也生效

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            border: 1px solid #000;

        }
        .left {
            text-align: left;
        }
        .center{
            text-align: center;
        }
        .right{
            text-align: right;
        }
        .justify{
            text-align: justify;
        }
        .justify-2{
            text-align-last: justify;
        }
    </style>
</head>

<body>
    <div>
        <p class="left">城市，是文明的容器，更是历史的见证。</p>
        <p class="center">城市，是文明的容器，更是历史的见证。</p>
        <p class="right">城市，是文明的容器，更是历史的见证。</p>
        <p class="justify">城市，是文明的容器，更是历史的见证。</p>
        <p class="justify-2">城市，是文明的容器，更是历史的见证。</p>
    </div>

</body>

</html>

解决text-align: justify如何对最后一行生效

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            border: 1px solid #000;
        p{
            text-align: justify;
        }
        /* 给标签添加伪元素，after是在元素内容后面插入额外的内容 */
        p::after{
            /* 需要添加的容易，可以为空 */
            content: '';
            /* 让伪元素转成行内快元素，可以定义款 */
            display: inline-block;
            /* 设置伪元素的宽为100%，相当于独占最后一行，那元素标签里的内容就相当于不是最后一行了 */
            width: 100%;
        }
    </style>
</head>

<body>
    <div>
        <p>城市，是文明的容器，更是历史的见证。</p>
    </div>

</body>

</html>

③text-decoration（文本修饰）

text-decoration 属性设置⽂本装饰线条的位置，综合属性可以单独设置 text-decoration-line、 text-decoration-color 和 text-decoration-style 属性 text-decoration-line

none 指定⽂字⽆装饰
underline 指定⽂字的装饰是下划线
overline 指定⽂字的装饰是上划线
line-through 指定⽂字的装饰是贯穿线

注：还可以组合多个值，比如 underline 和 overline，在文本上下方同时显示线条 text-decoration-style

solid 线条显示为单行
double 线条显示为双线
dotted 线条显示为点线
dashed 线条显示为虚线
wavy 线条显示为波浪线

.under {
    text-decoration: underline red;
}
.over {
    text-decoration: wavy overline orange;
}
.lineThough {
    text-decoration: line-through;
} 
.none {
    text-decoration: none;
}
.under01 {
    text-decoration-line: overline underline;
}

④word-spacing（单词间距）

只针对单词间距生效，汉字不生效

        p{
            /* 默认值 */
            word-spacing: normal;
            /* 常用的单位 */
            word-spacing: 2rem;
            word-spacing: 2em;
            word-spacing: 20px;
            word-spacing: 3%;
        }

⑤letter-spacing（文本间距）

针对每个汉字生效，英文中是针对每个字母的间距

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            border: 1px solid #000;
        p{
            /* 默认值 */
            letter-spacing: normal;
            /* 常用的单位 */
            letter-spacing: 2rem;
            letter-spacing: 2em;
            letter-spacing: 20px;
            letter-spacing: 3%;
        }
    </style>
</head>

<body>
    <div>
        <p>The sun dipped</p>
        <p>城市，是文明的容器，更是历史的见证。文脉赓续，是城市内涵式发展不能丢失的一份坚守。</p>
    </div>

</body>

</html>

⑥文本换行

word-wrap（文本换行）

word-wrap 属性设置⽂本内部⻓单词或URL换⾏取值：

normal 默认值（浏览器保持默认处理）。
break-word 在⻓单词或 URL 地址内部进⾏换⾏。

word-break

normal 使⽤浏览器默认的换⾏规则。
break-all 允许在单词内换⾏（）。
keep-all 只能在半⻆空格或连字符处换⾏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            border: 1px solid #000;
        }
        .normal {
            word-break: normal;
        }
        .break-all{
            word-break: break-all;
        }
        .keep-all{
            word-break: keep-all;
        }
    </style>
</head>

<body>
    <div>
        <p class="normal">rustling the leaves of the old oak tree that stood at the edge of the meadow. Nearby, a stream babbled softly. </p>
        <p class="break-all">rustling the leaves of the old oak tree that stood at the edge of the meadow. Nearby, a stream babbled softly. </p>
        <p class="keep-all">rustling the leaves of the old oak tree that stood at the edge of the meadow. Nearby, a stream babbled softly. </p>
    </div>

</body>

</html>

white-space（不允许文本换行）

nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 < br >标签为止。

 <style>
        div{
            width: 400px;
            border: 1px solid #000;
        }
        p{
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div>
        <p>城市，是文明的容器，更是历史的见证。文脉赓续，是城市内涵式发展不能丢失的一份坚守。</p>
    </div>

</body>

text-overflow单行（当文本溢出包含元素时剪切文字）

ellipsis 显示省略符号来代表被修剪的文本。

<style>
        div{
            width: 400px;
            border: 1px solid #000;
        }
        p{
            /* 不让文字换行 */
            white-space: nowrap;
            /*溢出隐藏*/
            overflow: hidden;
            /* 添加省略符号 */
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div>
        <p>城市，是文明的容器，更是历史的见证。文脉赓续，是城市内涵式发展不能丢失的一份坚守。</p>
    </div>

</body>

多行文本溢出省略

注意：多行文本溢出为固定写法

<style>
        div{
            width: 400px;
            border: 1px solid #000;
        }
        p{
            /* 标签变为弹性盒子，-webkit针对谷歌浏览器 */
            display: -webkit-inline-box;
            /* 按着垂直方向排序 */
            -webkit-box-orient: vertical;
            /* 需要保留的行数 */
            -webkit-line-clamp: 2;
            /* 多余的行数隐藏 */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div>
        <p>城市，是文明的容器，更是历史的见证。文脉赓续，是城市内涵式发展不能丢失的一份坚守。城市，是文明的容器，更是历史的见证。文脉赓续，是城市内涵式发展不能丢失的一份坚守。</p>
    </div>

</body>

⑦text-transform（更精细的大小写转换控制）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 5px;
        }
        .one{
            border: 2px solid pink;
            text-transform: capitalize; /* 首字母大写 */
        }
        .two{
            border: 2px solid greenyellow;
            text-transform: lowercase; /* 全小写 */
        }
        .thr{
            border: 2px solid powderblue;
            text-transform: uppercase; /* 全大写 */
        }
    </style>
</head>
<body>
    <div class="one">
        the beauty of life lies in its unpredictability, which brings both challenges and wonderful surprises.
    </div>
    <div class="two">
        The beauty of life lies in its unpredictability, which brings both challenges and wonderful surprises.
    </div>
    <div class="thr">
        The beauty of life lies in its unpredictability, which brings both challenges and wonderful surprises.
    </div>
</body>

4、web字体

①引入外部字体

可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字体了。

一般都会单独设置一个文件fonts放字体信息

<style type="text/css">
/* 第一步： 声明一个字体 */
@font-face {
    font-family: my-font;/*自定义名称*/
    src: url('时尚中黑简体.ttf');
}
@font-face {
    font-family: my-font2;
    src: url('迷你简双线体.ttf');
}
/* 第二步： 使用字体 */
p {
    font:50px my-font,sans-serif;
}
div {
    font:50px my-font2,sans-serif;
}
</style>
<p>
  这是一个段落标签
</p>

②定制字体

中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。可使用阿里 Web 字体定制工具：iconfont-webfont平台

③字体图片

相比图片更加清晰，灵活性高，更方便改变大小、颜色、风格等，兼容性好，IE也能支持

阿里图标官网地址：iconfont-阿里巴巴矢量图标库

除了iconfont阿里巴巴矢量图，还有其他的小图标Font Awesome 地址：iconfont-阿里巴巴矢量图标库注册微博，git或者淘宝账号登陆

1.搜索要下载的图标（如：小米购物车），将当前图标加入购物车

2.点击购物车下载对应的图片或者代码

此方法是下载代码教学

3.下载好的目录

下载好的代码中有三种引入方式：class类，symbol引入，unicode引用方式

class类： a. 兼容性良好，支持ie8+，及所有现代浏览器。 b. 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。 c. 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。 d. 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

symbol引入： a. 支持多色图标了，不再受单色限制。 b. 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 c. 兼容性较差，支持 ie9+,及现代浏览器。 d. 浏览器渲染svg的性能一般，还不如png。

unicode引用： a. 兼容性最好，支持ie6+，及所有现代浏览器。 b. 支持按字体的方式去动态调整图标大小，颜色等等。 c. 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色

各有各的优势，咱们使用的是class类的引入方式 css引入

二、新增选择器

选择器	例子	例子描述
element1~element2	p~ul	选择前面有元素(同胞，可以不相邻)的每个
[attribute^=value]	a[href^="https"]	选择其 href属性值以 "https" 开头的每个元素。
[attribute$=value]	img[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有元素。
[attribute*=value]	img[src ="abc"]img[src ="abc"]	选择其 src 属性中包含 "abc" 子串的每个元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素。
:nth-child(n)	p:nth-child(2n+1)	选择属于其父元素的第二个子元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。

三、圆角（`border-radius`）

基本用法

border-radius 可以接受长度值（如 px、em）或百分比作为参数，用于定义圆角的曲率半径。

当只提供一个值时，四个角将应用相同的圆角半径

border-radius:10px;

分别设置四个角（顺序，左上角、右上角、右下角、左下角）

border-radius:10px 20px 30px 40px;

使用百分比（常用于创建圆形或椭圆）

border-radius:50%;

宽和高相同时，会使元素变成圆

宽和高不等是，会使元素变成椭圆

单独设置某一个角

border-top-left-radius：上左角

border-top-right-radius：上右角

border-bottom-right-radius：下右角

border-bottom-left-radius：下左角

案例一、边框圆角

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            /* 边框 */
            border: 5px solid pink;
            /* 圆角 */
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>
</html>

案例二、绘制正圆

长=宽

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 圆角 */
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>

案例三、绘制椭圆

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 圆角 */
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>

案例四、绘制半圆

相连的两个角取值=宽的值剩下两个角=0

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 圆角 */
            border-radius: 200px 200px 0 0 ;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>
</html>

案例五、叶子形状

对角两个角度值=宽的值

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 圆角 
               顺序，左上角、右上角、右下角、左下角
               如果没有值，就会取对角的值
               左上角：200px、右上角：0、右下角：没有值取对角左上角的值200px、左下角：没有值取对角左上角的值0
            */
            border-radius: 200px 0 ;
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>

outline属性

outline（外轮廓）是一个用于在元素边框（border）外围绘制线条的属性，主要用于突出显示元素（如获得焦点的表单元素）。它与 border 类似，但有以下关键区别：

不占据空间：outline 绘制在元素边框之外，不会影响元素的尺寸和布局（不会改变元素的盒模型）。
不随元素形状变化：通常为矩形（即使元素设置了 border-radius，轮廓也可能仍是矩形，具体取决于浏览器）。
常用于交互反馈：默认情况下，很多浏览器会为获得焦点的元素（如输入框）添加 outline，提示用户感知当前焦点位置。

复合写法

可同时设置 outline-color、outline-style、outline-width，顺序不限。

outline: 2px solid #4d90fe;

outline-width 定义轮廓的宽度

outline-width: 3px;

outline-style 定义共诺的样式，可选值：

solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。必须设置此属性，否则轮廓不会显示。

outline-style: dashed;

outline-color 定义轮廓的颜色

特殊值 invert 表示与背景色反转（确保可见性）

outline-color: rgba(255, 0, 0, 0.5);

outline-color: #4d90fe;

outline-color:invert；

outline-offset 定义轮廓与元素边框之间的距离（可为负值，使轮廓向内缩进）

border: 1px solid #ccc;

outline: 2px solid blue;

outline-offset: 5px; /* 轮廓与边框间距 5px

移除默认焦点轮廓

两种方法均可移除效果

outline:none;

outline:0;

效果

注意：input框如果需要更改焦点轮廓，需要使用input的：focus伪类选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus{
            outline: 2px solid greenyellow;
        }
    </style>
</head>
<body>
    <div class="one">
        <input type="text">
    </div>
</body>
</html>

四、阴影

阴影效果是美化网页元素、增强视觉层次感的重要手段，通过 box-shadow 和 text-shadow 两个属性分别实现盒子（元素）阴影和文字阴影

1、盒子阴影（`box-shadow`）

作用于块级元素（如 div、button 等），为元素添加外阴影或内阴影

基本语法

复合属性： h-offset（水平轴偏移量）、v-offset（y轴偏移量量）、blur（模糊半径）、spread（阴影大小）、color（阴影颜色、inset（内阴影，不写默认是外阴影）	box-shadow: h-offset v-offset blur spread color inset;
h-offset：水平偏移量（必选）。正值向右，负值向左
v-offset：垂直偏移量（必选）。正值向下，负值向上
blur：模糊半径（可选）。值越大，阴影越模糊；默认 `0`（清晰边缘）
spread：阴影大小（可选）。正值扩大阴影，负值缩小；默认 `0`（与元素同大）
color：阴影颜色（可选）。默认与元素文本颜色一致，建议显式指定（如 `rgba(0,0,0,0.3)` 带透明度）
inset：内阴影标识（可选）。添加后阴影在元素内部，默认是外阴影。

示例1：基础外阴影

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
            /* 向右下偏移，轻微模糊 */
        }
    </style>
</head>

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

</body>

效果2：内阴影

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
            /* 内部阴影，模拟凹陷效果 */
        }
    </style>
</head>

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

效果3：多重阴影

多个阴影效果中间用，分开

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            box-shadow:
                0 0 10px rgba(0, 0, 255, 0.5),
                /* 蓝色发光 */
                3px 3px 5px rgba(0, 0, 0, 0.3);
                /* 灰色阴影 */
        }
    </style>
</head>

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

2、文本阴影（`text-shadow`）

为文本添加阴影，增强可读性或营造艺术效果

基本语法

text-shadow: h-offset v-offset blur color;

水平偏移量、垂直偏移量、模糊半径、阴影颜色

效果1：基础阴影

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            /* 文字立体感 */
        }
        }
    </style>
</head>

<body>
    <div class="box">CSDN博客</div>
</body>

效果2：发光阴影

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
             /* 红色发光文字 */
            text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
        }
    </style>
</head>

<body>
    <div class="box">CSDN博客</div>
</body>

效果3：描边效果

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            color: white;
            text-shadow:
                -1px -1px 0 #000,
                1px -1px 0 #000,
                -1px 1px 0 #000,
                1px 1px 0 #000;
            /* 四周阴影形成黑色描边 */
        }
    </style>
</head>

<body>
    <div class="box">CSDN博客</div>
</body>

五、背景操作（渐变）

1、线性渐变

语法：background: linear-gradient(direction[方向] / angle[角度], color-stop1[颜色], color-stop2[颜色], ...);

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

效果一：从上到下渐变（默认）

 <style>
        div{
            width: 100px;
            height: 100px;
            background-image: linear-gradient(#fff1eb, #ace0f9);
        }
    </style>
</head>
<body>
    <div></div>
</body>

效果二：从左到右渐变

to right 表示向哪个方向渐变， left 表示从左边开始渐变

    <style>
        div{
            width: 100px;
            height: 100px;
            /* 自带的需要写to，to right代表向右去，由左向右进行渐变 */
            background-image: linear-gradient(to right,#fff1eb, #ace0f9);
            /* 浏览器兼容的，直接写left，代表从左往右渐变 */
            background-image: -webkit-linear-gradient(left,#fff1eb, #ace0f9);
            background-image: -o-linear-gradient(left,#fff1eb, #ace0f9);
            background-image: -moz-linear-gradient(left,#fff1eb, #ace0f9);
        }
    </style>
</head>
<body>
    <div></div>
</body>

效果三：对角渐变效果

    <style>
        div{
            width: 100px;
            height: 100px;
            /* 自带的需要写to，to right top代表向右上去，由左下向右进行渐变 */
            background-image: linear-gradient(to right top,#fff1eb, #ace0f9);
            /* 浏览器兼容的，直接写left bottom，代表从左下往右上渐变 */
            background-image: -webkit-linear-gradient(left bottom,#fff1eb, #ace0f9);
            background-image: -o-linear-gradient(left bottom,#fff1eb, #ace0f9);
            background-image: -moz-linear-gradient(left bottom,#fff1eb, #ace0f9);
        }
    </style>
</head>
<body>
    <div></div>
</body>

效果四：使用角度渐变

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

注意：很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

    <style>
        div{
            width: 100px;
            height: 100px;
            /* 0deg 代表从下到上的渐变 */
            background-image: linear-gradient(0deg,#fff1eb, #ace0f9);
            /* 浏览器兼容的，需要按照公式进行换算  90 - x = y
            即 90 - 0 = 90
            */
            background-image: -webkit-linear-gradient(90deg,#fff1eb, #ace0f9);
            background-image: -o-linear-gradient(90deg,#fff1eb, #ace0f9);
            background-image: -moz-linear-gradient(90deg,#fff1eb, #ace0f9);
        }
    </style>
</head>
<body>
    <div></div>
</body>

效果五：重复渐变

repeating-linear-gradient() 函数用于重复线性渐变：

    <style>
        div{
            width: 100px;
            height: 100px;
            /* 重复渐变，证颜色的占比不能达到100%，否则无法有明显的重复效果 */
            background-image: repeating-linear-gradient(#fff1eb 10%, #ace0f9 20%);
            /* 浏览器兼容*/
            background-image: -webkit-repeating-linear-gradient(#fff1eb 10%, #ace0f9 20%);
            background-image: -o-repeating-linear-gradient(#fff1eb 10%, #ace0f9 20%);
            background-image: -moz-repeating-linear-gradient(#fff1eb 10%, #ace0f9 20%);
        }
    </style>
</head>
<body>
    <div></div>
</body>

2、径向渐变

    <style>
        div {
            width: 200px;
            height: 200px;
            border-radius: 100px;
            /* 径向渐变，以圆心为中心向外扩散渐变 */
            background: radial-gradient(#fbc2eb, #a6c1ee);
            /* 浏览器兼容 */
            background: -moz-radial-gradient(#fbc2eb, #a6c1ee);
            background: -webkit-radial-gradient(#fbc2eb, #a6c1ee);
            background: -moz-radial-gradient(#fbc2eb, #a6c1ee);
        }
    </style>
</head>

<body>
    <div></div>
</body>

颜色渐变网站推荐：Fresh Background Gradients | WebGradients.com 💎

3、background-origin（背景开始的位置）

background-origin背景图片从什么位置开始填充

padding-box：背景图像从内边距左上角开始填充（默认值）
border-box：背景图像从边框左上角开始填充
content-box：背景图像从内容左上角开始填充

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: flex;
        }
        .box1 {
            width: 200px;
            height: 300px;
            border: 10px dashed #000;
            background: url(./img/xingxing.jpeg) no-repeat;
            padding: 20px;
            /* 从边框开始填充背景图片 */
            background-origin: border-box;
            margin-left: 20px;
        }
        .box2{
            width: 200px;
            height: 300px;
            border: 10px dashed #000;
            background: url(./img/xingxing.jpeg) no-repeat;
            padding: 20px;
            /* 从内边距开始填充背景图片 */
            background-origin: padding-box;
            margin-left: 20px;
        }
        .box3{
            width: 200px;
            height: 300px;
            border: 10px dashed #000;
            background: url(./img/xingxing.jpeg) no-repeat;
            padding: 20px;
            /* 从内容开始填充背景图片 */
            background-origin: content-box;
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

4、background-clip（背景图裁切）

background-origin背景图片从什么位置开始填充，必须要有background-origin属性才会生效

border-box：背景图像从边框右下角开始裁切
padding-box：背景图像从内边距右下角开始裁切
content-box：背景图像从内容右下角开始裁切
text

注意：给背景图片设置位置时，一定要添加no-repeat；并且开始的范围不能比结束的范围大，否则会以给的最小值为开始

效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: flex;
        }
        .box1 {
            width: 200px;
            height: 300px;
            border: 10px dashed #000;
            background: url(./img/xingxing.jpeg) no-repeat;
            padding: 20px;
            /* 从边框开始填充背景图片 */
            background-origin: border-box;
            /* 从内边距开始裁剪，注意clip的值不能比origin小，否则origin也会按照最小的值进填充
            效果看图片1 */
            background-clip: padding-box;
            margin-left: 20px;
        }
        .box2{
            width: 200px;
            height: 300px;
            border: 10px dashed #000;
            background: url(./img/xingxing.jpeg) no-repeat;
            padding: 20px;
            /* 从内边距开始填充背景图片 */
            background-origin: padding-box;
            /* 从内边距开始剪裁背景图片
            效果看图片二 */
            background-clip: padding-box;
            margin-left: 20px;
        }
        .box3{
            width: 200px;
            height: 300px;
            border: 10px dashed #000;
            background: url(./img/xingxing.jpeg) no-repeat;
            padding: 20px;
            /* 从内容开始填充背景图片 */
            background-origin: content-box;
            /* 从边框开始剪裁背景图片
            效果看图三 */
            background-clip: border-box;
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

文本裁切效果

    <style>
        body {
            /* 添加整体的背景颜色 */
            background-color: #000;
        }

        div {
            width: 1000px;
            height: 400px;
            /* 设置div在页面中居中显示 */
            margin: 0 auto;
            /* 设置文本居中 */
            text-align: center;
            /* font：粗细 字体大小/行高 字体样式 */
            font: bold 155px/400px "simhei";
            /* 给div添加边框 */
            border: 20px solid #ccc;
            /*必须添加背景图片，否则看不出来效果 */
            background: url("./img/xingxing.jpeg");
            /* 给字体设置rgba色值，其中a是透明度，否则无法透过文字看到div的背景图片 */
            color: rgba(255, 0, 0, 0.1);
            /*裁剪：按照文字来进行裁剪 必须添加-webkit- 兼容问题 */
            background-clip: text;
            -webkit-background-clip: text;
        }
    </style>
</head>

<body>
    <div>
        你本来就很美
    </div>
</body>

六、过渡

过渡效果通过监控元素的CSS 属性变化，在指定时间内将属性从初始值 “平滑过渡” 到目标值，而非瞬间切换。例如，鼠标悬停时按钮的颜色、大小、透明度等变化，都可以通过过渡实现渐变效果

属性名	作用	取值示例
`transition-property`	指定需要过渡的 CSS 属性（必选）	`width`、`all`（所有属性）、`none`
`transition-duration`	过渡持续时间（必选，单位 s 或 ms）	`0.3s`、`500ms`
`transition-timing-function`	过渡速度曲线（可选）	`ease`（默认）、`linear`、`ease-in-out`
`transition-delay`	过渡延迟开始的时间（可选，单位 s 或 ms）	`0.2s`（延迟 0.2 秒开始）

七、2D效果（transform）

2D 转换（transform）可以对元素进行平移、旋转、缩放、倾斜等操作，无需使用图片或 JavaScript 就能实现丰富的视觉效果，且性能优于传统方法

一般需要和过渡效果配合使用，否则无法看出2D效果

子元素会继承父元素的转换效果（如父元素旋转，子元素也会跟着旋转）

转换后的元素不会脱离文档流，但会创建新的堆叠上下文，可能覆盖其他元素

1、平移（translate(X,Y)）

将元素沿X轴或Y轴移动，不影响其他元素的布局

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one{ width: 200px; height: 100px; background-color: pink; /* 圆角顺序，左上角、右上角、右下角、左下角如果没有值，就会取对角的值左上角：200px、右上角：0、右下角：没有值取对角左上角的值200px、左下角：没有值取对角左上角的值0 */border-radius: 200px 0 ; } </style></head><body><div class="one"></div></body>

translate(x，y) 同时设置X和Y轴的移动值	transform:translate(200px, 100px);
translateX(x) 设置X轴移动的值	transform:translateX(200px);
translateY(y) 设置Y轴移动的值	transform:translateY(100px);

演示效果需要复制代码，自行尝试

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 添加2S过渡效果 */
            transition: all 2s linear;
        }
        .box:hover{
            /* 悬浮box上，向右平移200px，向下平移300px */
            transform: translate(200px,300px);
        }
    </style>
</head>

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

2、旋转（transform:rotate(角度)）

使元素绕原点（默认是元素中心点）旋转

语法：rotate(angle)，angle 为角度值（如 30deg 顺时针旋转，-45deg 逆时针旋转）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 添加2S过渡效果 */
            transition: all 2s linear;
        }
        .box:hover{
            /* 悬浮box上，向右平移200px，向下平移300px */
            transform: rotate(30deg);
        }
    </style>
</head>

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

3、缩放（transform:scale(x,y)）

放大或缩小元素

1大小不变，大于1是放大，小于1是缩小

scale(x,y)同时沿 X、Y 轴缩放	transform:scale(2,3);
scale(value)单值时 x=y	transform:scale(2); 整体放大2倍
scaleX(x) 仅沿 X 轴缩放	transform:scaleX(2);
scaleY(x) 仅沿 Y 轴缩放	transform:scaleY(2);

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 添加2S过渡效果 */
            transition: all 2s linear;
        }
        .box:hover{
            /* box整体放大2倍 */
            transform: scale(2);
        }
    </style>
</head>

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

4、倾斜（transform：skew(x-angle,y-angle)）

使元素沿 X 轴或 Y 轴倾斜（类似 “拉伸” 效果）

skew(x,y) 同时沿 X、Y 轴倾斜

transform:skew(20deg,30deg);

skewX(x) 仅沿 X 轴倾斜（x 为角度，正值向右倾斜，负值向左）

transform:skewX(20deg);

skewY(y) 仅沿 Y 轴倾斜（y 为角度，正值向下倾斜，负值向上）

transform:skewY(30deg);

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 添加2S过渡效果 */
            transition: all 2s linear;
        }
        .box:hover{
            /* 沿X轴倾斜20度，沿Y轴倾斜30度 */
            transform: skew(20deg,30deg);
        }
    </style>
</head>

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

组合使用与过渡效果

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 添加2S过渡效果 */
            transition: all 2s linear;
        }
        .box:hover{
            transform: translate(100px, 200px) rotate(5deg) scale(1.1);
        }
    </style>
</head>

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

八、动画

可以定义多关键帧、循环播放、自动触发等更灵活的动画，无需依赖 JavaScript 即可创建丰富的视觉体验

1、概念

CSS3 动画由两部分组成：

@keyframes：创建动画的关键帧（动画在不同时间点的状态）。
animation 属性：将关键帧应用到元素，并配置动画的播放方式（时长、循环等）。

2、`@keyframes` 关键帧定义

语法：

百分比表示动画进度（0% 是开始，100% 是结束，中间可以随时添加百分比）。
可使用 from 代替 0%，to 代替 100%（适用于简单动画，只有开始和结束两帧）。

@keyframes 需要放在style中

@keyframes 动画名称 {

0% { /* 动画开始时的样式 */ }

中间百分比 { /* 动画过程中的样式 */ }

100% { /* 动画结束时的样式 */ }

}

        /* 只能实现简单的效果 */
        @keyframes move{
            from{
                transform: translate(200px,0);
            }
            to{
                transform: translate(200px,200px);
            }
        }
        /* 可以定义多个关键帧，让元素绕着正方体去运行 */
        @keyframes move{
            0%{
                transform: translate(0,0);
            }
            25%{
                transform: translate(200px,0);
            }
            50%{
                transform: translate(200px,200px);
            }
            75%{
                transform: translate(0,200px);
            }
            100%{
                transform: translate(0,0);
            }

3、`animation` 属性详解

将关键帧应用到元素

需要再选择器中进行使用

属性	作用	常用值
`animation-name`	指定要使用的关键帧名称（必选）	自定义动画名（如 `colorMove`）
`animation-duration`	动画持续时间（必选）	秒（`s`）或毫秒（`ms`），如 `2s`
`animation-timing-function`	动画速度曲线	`ease`（默认）、`linear`、`ease-in-out` 等
`animation-delay`	延迟开始时间	如 `1s`（延迟 1 秒开始），负值表示提前开始
`animation-iteration-count`	播放次数	`1`（默认）、`infinite`（无限循环）
`animation-direction`	播放方向	`normal`（正向）、`reverse`（反向）、`alternate`（正反交替）
`animation-fill-mode`	动画结束后状态	`none`（默认）、`forwards`（保持最后帧）、`backwards`（开始前应用第一帧）
`animation-play-state`	控制播放状态	`running`（运行）、`paused`（暂停，可通过 JS 或 `:hover` 触发）

复合属性简写

animation: 名称时长速度曲线延迟播放次数方向填充模式;

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 常用的写法
            名称  动画持续时间  播放曲线  播放次数
            */
            animation: move 2s linear infinite;
        }
        /* 可以定义多个关键帧，让元素绕着正方体去运行 */
        @keyframes move{
            0%{
                transform: translate(0,0);
            }
            25%{
                transform: translate(200px,0);
            }
            50%{
                transform: translate(200px,200px);
            }
            75%{
                transform: translate(0,200px);
            }
            100%{
                transform: translate(0,0);
            }
        }
    </style>
</head>

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

4、动画插件

Redirecting to Animate.css 【4.1.1版本】

Animate.css 一款强大的预设css3动画库【 3.5.1版本】

https://www.jq22.com/demo/Animate201707101048/animate.min.css【 3.5.1版本CSS下载地址】

使用方法：

下载对应的css文件
引用css文件
使用对应的类名即可达到效果

注意：不同的版本需要对应不同的css文件和网址

以下为【 3.5.1版本】的使用方法

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/animate.min.css.css">
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 50px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="animated wobble">hello</div>
</body>

5、WOW插件

效果参考资料：WOW.js演示_dowebok

使用参考资料：WOW.js – 让页面滚动更有趣 - Cuckoo_H - 博客园

使用步骤：

引入对应的js文件
初始化js代码

    <!-- 1.引入js代码 -->
    <script src="../../JS/wow.js"></script>
    <!-- 2.初始化js代码 -->
    <script type="text/javascript">
        new WOW().init();
    </script>

3.配合动画插件给元素添加类名，animated需要修改为wow

        <div class="wow rollIn "></div>
        <div class="wow rollIn "></div>

4.给对应的动画添加wow效果

data-wow-duration动画执行的时间
data-wow-iteration循环的次数
data-wow-delay="5s" 延迟的时间
data-wow-offset="10" 偏移值

        <div class="wow animated lightSpeedIn " data-wow-delay="0.5s"></div>
        <div class="wow animated pulse  " data-wow-iteration="5" data-wow-duration="0.15s"></div>

九、3D效果

3D 效果通过 transform 属性结合 3D 变换函数，能创建具有立体感的视觉效果，让元素在三维空间中实现旋转、平移、缩放等操作

1、基础概念

三维空间：包含 X 轴（水平方向）、Y 轴（垂直方向）和 Z 轴（纵深方向，垂直于屏幕）。
透视（perspective）：模拟人眼观察物体的 “近大远小” 效果，是实现 3D 视觉的关键。
3D 容器：父元素需设置 transform-style: preserve-3d，确保子元素在 3D 空间中布局（而非扁平化）

①perspective（透视）

定义观察者与元素的距离（值越小，透视感越强），通常设置在父元素上

.parent {
  perspective: 1000px; /* 观察者距离元素1000px，值越小3D效果越明显 */
}

②transform-style（置子元素是否保留 3D 效果）

默认是2D效果

必须设置在父元素上

.parent {
  transform-style: preserve-3d; /* 子元素保持3D空间关系 */
  /* 默认值 flat：子元素被扁平化到父元素平面 */
}

③backface-visibility（控制元素背面是否可见）

常用于3D旋转时

.box {
  backface-visibility: hidden; /* 背面不可见（如卡片翻转时隐藏背面） */
}

2、3D 旋转（`rotateX()`/`rotateY()`/`rotateZ()`）

rotateX(angle)：绕 X 轴旋转（上下翻转，如翻书效果）。
rotateY(angle)：绕 Y 轴旋转（左右翻转，如开门效果）。
rotateZ(angle)：绕 Z 轴旋转（与 2D 的 rotate() 类似，平面旋转）。

3、3D 平移（`translateZ()`/`translate3d()`）

translateZ(z)：沿 Z 轴平移（正值向观察者靠近，负值远离）。
translate3d(x, y, z)：同时沿 X、Y、Z 轴平移。

4、3D 缩放（`scaleZ()`/`scale3d()`）

scaleZ(z)：沿 Z 轴缩放（需配合其他变换才能看出效果）。
scale3d(x, y, z)：同时沿 X、Y、Z 轴缩放。

5、3D 矩阵变换（`matrix3d()`）

通过 4x4 矩阵组合所有 3D 变换，语法复杂但功能强大，适合高级定制。

十、布局模式

布局方案	特点	适用场景
Flexbox	一维布局，强大的对齐能力	导航栏、卡片布局、垂直居中
CSS Grid	二维布局，精确控制行列	复杂页面结构、杂志式布局
多列布局	文本内容自动分列	新闻文章、长文本内容
浮动布局	传统布局方式（逐渐淘汰）	旧项目维护

1、响应式布局

是一种使网站能自动适应不同设备屏幕尺寸的网页设计方法

响应式断点参考

设备类型	断点范围	典型应用场景
超小屏幕	<576px	手机（竖屏）
小屏幕	≥576px	手机（横屏）/小型平板
中等屏幕	≥768px	平板电脑
大屏幕	≥992px	笔记本电脑
超大屏幕	≥1200px	桌面显示器

注意：

响应式布局里面只用写需要改变的样式

如果布局最小尺寸是580px，必须要写一个0-580px的相应布局，，否则可能会出现小于580px，就会变成默认样式

相对单位：使用 %, vw, rem 代替固定像素值

注意书写顺序，只用min-width时，尺寸一定是从大到小的写，只使用max-width时，尺寸一定是从小到大的写，建议书写规范，min-width和max-width同时使用

只使用min-width时书写规范

@media screen and (min-width: 1200){ //>=1200的设备 }
@media screen and (min-width: 992px){ //>=992的设备 }
@media screen and (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。

只使用max-width时书写规范

@media screen and (max-width: 1199){ //<=1199的设备 }
@media screen and (max-width: 991px){ //<=991的设备 }
@media screen and (max-width: 767px){ //<=768的设备 }

同时使用min-width和max-width时

注意：最后一个必须要写，否则会导致360px以下的样式按照默认样式显示

@media screen and (min-width:960px) and (max-width:1200px){ 960-1200px的设备 }
@media screen and (min-width:580px) and (max-width:959px){ 580-959px的设备 }
@media screen and (min-width:360px) and (max-width:579px){ 360-579的设备 }
@media screen and (max-width:359px){ 小于359px的设备 }

        /* 默认样式 */
        .all{
            width: 800px;
            height: 800px;
            background-color: pink;
        }

        /* 屏幕宽度在960-1200px之间的布局样式 */
        @media screen and (min-width:960px) and (max-width:1200px) {
            .all{
                background-color: rgb(255, 111, 135);
            }
        }

        /* 屏幕宽度在580-959px之间的布局样式 */
        @media screen and (min-width:580px) and (max-width:959px) {
            .all{
                background-color: rgb(249, 61, 92);
            }
        }

        /* 屏幕宽度在360-578px之间的布局样式 */
        @media screen and (min-width:360px) and (max-width:578px) {
            .all{
                background-color: rgb(248, 11, 50);
            }
        }

        /* 屏幕宽度在359px以下的布局样式 */
        /* 注意：一定要写此布局，保证在多少px以下的样式是什么样的
            如果不写，可能会导致屏幕宽度缩小到一定的尺寸之后就返回到默认的样式 */
        @media screen and (max-width:359px) {
            .all{
                background-color: rgb(122, 6, 25);
            }
        }
    </style>
</head>
<body>
    <div class="all"></div>
</body>

不同设备

2、多列布局（瀑布流布局）

多列布局是CSS中一种将内容自动分割为多个垂直列显示的排版方式，类似报纸或杂志的排版效果。它特别适合处理长文本内容，能提升大屏幕下的可读性和空间利用率。

属性	作用	示例值
`column-count`	指定列数	`3`
`column-width`	指定列的最小宽度	`200px`
`columns`	简写属性（列宽 + 列数）	`columns: 200px 3;`
`column-gap`	列间距	`2em`
`column-rule`	列间分隔线（类似border）	`1px solid #ddd`
`column-span`	元素跨列（仅`none`/`all`）	`column-span: all;`
`column-fill`	列高度平衡方式（`auto`/`balance`）	`column-fill: balance;`

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .all {
            /* 分成3列 */
            column-count: 3;
            /* 列间距40px */
            column-gap: 40px;
            /* 虚线分隔线 */
            column-rule: 1px dashed #ccc;
        }

        h2 {
            /* 标题跨所有列 */
            column-span: all;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="all">
        <h2>标题</h2>
        <p>多列布局是CSS中一种将内容自动分割为多个垂直列显示的排版方式，类似报纸或杂志的排版效果。它特别适合处理长文本内容，能提升大屏幕下的可读性和空间利用率。</p>
        <p>多列布局是CSS中一种将内容自动分割为多个垂直列显示的排版方式，类似报纸或杂志的排版效果。它特别适合处理长文本内容，能提升大屏幕下的可读性和空间利用率。</p>
        <p>多列布局是CSS中一种将内容自动分割为多个垂直列显示的排版方式，类似报纸或杂志的排版效果。它特别适合处理长文本内容，能提升大屏幕下的可读性和空间利用率。</p>
        <p>多列布局是CSS中一种将内容自动分割为多个垂直列显示的排版方式，类似报纸或杂志的排版效果。它特别适合处理长文本内容，能提升大屏幕下的可读性和空间利用率。</p>
        <p>多列布局是CSS中一种将内容自动分割为多个垂直列显示的排版方式，类似报纸或杂志的排版效果。它特别适合处理长文本内容，能提升大屏幕下的可读性和空间利用率。</p>
    </div>
</body>

3、弹性盒子

CSS3 弹性盒子（Flexbox）是一种用于页面布局的一维布局模型，它可以轻松地对齐、分布和重排容器内的元素，特别适合响应式设计

容器属性（写在父级元素内的属性）

属性名	值	作用描述	示例值
`display`	`flex` `inline-flex`	定义容器为弹性布局。 `flex` 生成块级容器；`inline-flex` 生成行内容器。	`display: flex;`
`flex-direction`	`row` (默认) `row-reverse` `column` `column-reverse`	设置主轴方向。决定项目的排列方向（水平正/反序，垂直正/反序）。	`flex-direction: column;`
`flex-wrap`	`nowrap` (默认) `wrap` `wrap-reverse`	定义项目是否换行。 `nowrap` 不换行（可能溢出）；`wrap` 换行（第一行在上方）；`wrap-reverse` 换行（第一行在下方）。	`flex-wrap: wrap;`
`flex-flow`	`[flex-direction]` `[flex-wrap]`	`flex-direction` 和 `flex-wrap` 的简写属性。	`flex-flow: row wrap;`
`justify-content`	`flex-start` (默认) `flex-end` `center` `space-between` `space-around` `space-evenly`	定义项目在主轴上的对齐方式。控制项目在主轴方向上的分布（左/右/居中/两端对齐/项目周围等距/项目之间和两端等距）。	`justify-content: center;`
`align-items`	`stretch` (默认) `flex-start` `flex-end` `center` `baseline`	定义项目在交叉轴上的对齐方式。控制所有项目在单行内如何垂直对齐（拉伸/顶对齐/底对齐/居中对齐/基线对齐）。	`align-items: flex-start;`
`align-content`	`stretch` (默认) `flex-start` `flex-end` `center` `space-between` `space-around`	定义多行项目在交叉轴上的对齐方式。 (仅当项目有多行时才生效)。控制行与行之间的垂直分布（拉伸/顶对齐/底对齐/居中/两端对齐/等间距）。	`align-content: space-between;`

项目属性（写在子级元素内的属性）

属性名	可能的值	作用描述	示例值
`flex-grow`	非负数字（默认值：0）	定义项目的放大比例，决定如何分配容器的剩余空间。0 表示不放大。	`flex-grow: 1`
`flex-shrink`	非负数字（默认值：1）	定义项目的缩小比例，空间不足时如何收缩。0 表示不缩小（防止被压缩）。	`flex-shrink: 0`
`flex-basis`	长度值（如 `px`、`%`）或 `auto`（默认值）	定义项目在主轴上的初始尺寸，优先级高于项目自身的 `width`/`height`。	`flex-basis: 200px`
`flex`	`flex-grow flex-shrink flex-basis` 的简写（默认值：`0 1 auto`）	综合设置项目的放大、缩小和初始尺寸，推荐使用简写形式。	`flex: 1`（等价于 `1 1 0%`）
`align-self`	`auto`（默认）、`stretch`、`flex-start`、`flex-end`、`center`、`baseline`	覆盖容器的 `align-items`，单独设置当前项目在交叉轴上的对齐方式。	`align-self: center`
`order`	整数（默认值：0）	定义项目的排列顺序，数值越小越靠前（可使用负数）。	`order: -1`

4、流式

流式布局（百分比布局）

使用百分比（%）作为主要尺寸单位
元素宽度随父容器宽度自动调整
通常结合固定像素的边距和内边距使用
是响应式设计的基础之一

.box{
  width: 90%; /* 占父容器宽度的90% */
  max-width: 1200px; /* 最大宽度限制 */
  min-width: 320px; /* 最小宽度限制 */
  margin: 0 auto; /* 居中显示 */
}

.one{
  width: 50%; /* 占父容器宽度的50% */
  float: left; /* 浮动布局 */
  padding: 0 15px;
  box-sizing: border-box; /* 确保padding不影响总宽度 */
}

5、圣杯布局（双飞翼布局）

两侧边栏使用固定宽度保证不会收缩，中间内容自适应

案例1：使用弹性盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .all{
            width: 100%;
            background-color: pink;
            /* 父级添加弹性盒子 */
            display: flex;
        }
        .left,.right{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
        .center{
            height: 100px;
            background-color: deepskyblue;
            /* 使用flex，使得center占1份，且随着窗口进行缩放 */
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>
</html>

案例2：使用定位实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .all{
            width: 100%;
            background-color: pink;
            position: relative;
        }
        .left,.right{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
        .left{
            position: absolute;
            left: 0;
        }
        .right{
            position: absolute;
            right: 0;
            top: 0;
        }
        .center{
            height: 100px;
            background-color: deepskyblue;
            /* 内外边距二选一 */
            margin: 0 100px;
            /* padding: 0 100px; */
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
</body>
</html>

案例3：使用浮动实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .all{
            width: 100%;
            background-color: pink;
        }
        .left,.right{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .center{
            height: 100px;
            background-color: deepskyblue;
            /* 内外边距二选一 */
            margin: 0 100px;
            /* padding: 0 100px; */
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="left">left</div>
        <div class="right">right</div>
        <!-- center必须要放在最后面，利用浮动提升半个层级，让center自动上去 -->
        <div class="center">center</div>

    </div>
</body>
</html>

6、等分布局

平均分布，也可以使用百分比布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .all{
            width: 100%;
            height: 100px;
            display: flex;
        }
        .one{
            /* 设置每个名字为one的元素都分1份 */
            flex: 1;
            background-color: pink;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
    </div>
</body>
</html>

7、rem布局

rem 布局是一种基于根元素字体大小的相对单位布局方案，常用于响应式布局和移动端布局

1rem = HTML 根元素的 font-size 值（默认通常是 16px）
所有元素尺寸都使用 rem 单位，实现整体缩放效果
参考文档http://caibaojian.com/web-app-rem.html
vscode插件：px to rem（中间需要有空格隔开）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 20rem;
            height: 20rem;
            background-color: pink;
            margin: 0 auto;
        }
        /* 使用媒体查询适配不同屏幕 */
        @media screen and (min-width:1200px){
            html{
                /* 设置根元素基准值 */
                font-size: 20px;
            }
        }
        @media screen and (min-width:960px) and (max-width:1199px){
            html{
                font-size: 15px;
            }
        }
        @media screen and (min-width:580px) and (max-width:959px){
            html{
                font-size: 10px;
            }
        }
        @media screen and (max-width:579px){
            html{
                font-size: 5px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS3新增

一、新增语法

1、长度

2、颜色设置方式

①RGBA颜色

②HSLA颜色（有透明度）

③HSL颜色（无透明度）

④十六进制扩展（透明度）

⑤transparent

⑥filter（滤镜）

3、文本属性

①text-indent（文本缩进）

②text-align（文本对齐）

解决text-align: justify如何对最后一行生效

③text-decoration（文本修饰）

④word-spacing（单词间距）

⑤letter-spacing（文本间距）

⑥文本换行

word-wrap（文本换行）

word-break

white-space（不允许文本换行）

text-overflow单行（当文本溢出包含元素时剪切文字）

多行文本溢出省略

⑦text-transform（更精细的大小写转换控制）

4、web字体

①引入外部字体

②定制字体

③字体图片

二、新增选择器

三、圆角（border-radius）

基本用法

案例一、边框圆角

案例二、绘制正圆

案例三、绘制椭圆

案例四、绘制半圆

案例五、叶子形状

outline属性

效果

四、阴影

1、盒子阴影（box-shadow）

基本语法

示例1：基础外阴影

效果2：内阴影

效果3：多重阴影

2、文本阴影（text-shadow）

基本语法

效果1：基础阴影

效果2：发光阴影

效果3：描边效果

五、背景操作（渐变）

1、线性渐变

效果二：从左到右渐变

效果三：对角渐变效果

效果四：使用角度渐变

效果五：重复渐变

2、径向渐变

3、background-origin（背景开始的位置）

4、background-clip（背景图裁切）

效果

文本裁切效果

六、过渡

七、2D效果（transform）

1、平移（translate(X,Y)）

2、旋转（transform:rotate(角度)）

3、缩放（transform:scale(x,y)）

4、倾斜（transform：skew(x-angle,y-angle)）

组合使用与过渡效果

八、动画

1、概念

2、@keyframes 关键帧定义

语法：

3、animation 属性详解

复合属性简写

4、动画插件

5、WOW插件

九、3D效果

1、基础概念

①perspective（透视）

②transform-style（置子元素是否保留 3D 效果）

③backface-visibility（控制元素背面是否可见）

三、圆角（`border-radius`）

1、盒子阴影（`box-shadow`）

2、文本阴影（`text-shadow`）

2、`@keyframes` 关键帧定义

3、`animation` 属性详解

2、3D 旋转（`rotateX()`/`rotateY()`/`rotateZ()`）

3、3D 平移（`translateZ()`/`translate3d()`）

4、3D 缩放（`scaleZ()`/`scale3d()`）

5、3D 矩阵变换（`matrix3d()`）