CSS3新增

原创 已于 2025-08-07 12:11:21 修改 · 1.1k 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #前端 #css

于 2025-08-01 17:31:29 首次发布

一、新增语法

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~element2p~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-typep:first-of-type选择属于其父元素的首个元素的每个元素。
:last-of-typep:last-of-type选择属于其父元素的最后元素的每个元素。
:only-of-typep:only-of-type选择属于其父元素唯一的元素的每个元素。
:only-childp: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-childp: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 就能实现丰富的视觉效果，且性能优于传统方法

  1. 一般需要和过渡效果配合使用，否则无法看出2D效果
  2. 子元素会继承父元素的转换效果（如父元素旋转，子元素也会跟着旋转）
  3. 转换后的元素不会脱离文档流，但会创建新的堆叠上下文，可能覆盖其他元素

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 动画由两部分组成：
 

  1. @keyframes：创建动画的关键帧（动画在不同时间点的状态）。
  2. 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下载地址】
 

使用方法：
 

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

 
 
注意：不同的版本需要对应不同的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 - 博客园
 

使用步骤：
 

  1.  
    引入对应的js文件
     
  2.  
    初始化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、基础概念
 

  1. 三维空间：包含 X 轴（水平方向）、Y 轴（垂直方向）和 Z 轴（纵深方向，垂直于屏幕）。
  2. 透视（perspective）：模拟人眼观察物体的 “近大远小” 效果，是实现 3D 视觉的关键。
  3. 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桌面显示器
 

 
 
注意：
 
 
  1. 响应式布局里面只用写需要改变的样式
  2. 如果布局最小尺寸是580px，必须要写一个0-580px的相应布局，，否则可能会出现小于580px，就会变成默认样式
  3.  
    相对单位：使用 %, vw, rem 代替固定像素值
     
  4.  
    注意书写顺序，只用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）是一种用于页面布局的一维布局模型，它可以轻松地对齐、分布和重排容器内的元素，特别适合响应式设计
 

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

属性名值作用描述示例值
displayflex
 inline-flex		定义容器为弹性布局。 flex 生成块级容器；inline-flex 生成行内容器。display: flex;
flex-directionrow (默认)
 row-reverse
 column
 column-reverse		设置主轴方向。 决定项目的排列方向（水平正/反序，垂直正/反序）。flex-direction: column;
flex-wrapnowrap (默认)
 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-contentflex-start (默认)
 flex-end
 center
 space-between
 space-around
 space-evenly		定义项目在主轴上的对齐方式。 控制项目在主轴方向上的分布（左/右/居中/两端对齐/项目周围等距/项目之间和两端等距）。justify-content: center;
align-itemsstretch (默认)
 flex-start
 flex-end
 center
 baseline		定义项目在交叉轴上的对齐方式。 控制所有项目在单行内如何垂直对齐（拉伸/顶对齐/底对齐/居中对齐/基线对齐）。align-items: flex-start;
align-contentstretch (默认)
 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
flexflex-grow flex-shrink flex-basis 的简写（默认值：0 1 auto）综合设置项目的放大、缩小和初始尺寸，推荐使用简写形式。flex: 1（等价于 1 1 0%）
align-selfauto（默认）、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 布局是一种基于根元素字体大小的相对单位布局方案，常用于响应式布局和移动端布局
 
 

 

<!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>
 

十五、Bootstrap
 

十六、Sass
 

十七、元素水平垂直居中方法

                

        

    

    
  



    



                



	

		

			

				
					
CSS3新增选择器

				
			

			

				

					qq_53280201的博客
				

				

					02-14
					
					815
					
				

			

		

		

			
				
CSS3给我们新增的选择器，可以更加便捷，更加自由的选择目标元素

1. 关系选择器


~  //兄弟选择器：选择该元素后面的同级的兄弟元素

例如：

h1~p:选择h1元素后面的所有同级p元素。

p~p:选择p元素后面的所有同级p元素，除了第一个p元素

2. 属性选择器

选择器
			简介
		E[att]
			选择具有att属性的E元素
		E[att="val'']
			选择具有att属性且属性值等于val的E元素
		E[att^="val"]
			匹配具有att属性且值以val开头

			
		

	



                

            
              



	

		

			

				
					
css3有哪些新增属性,CSS3新增属性

				
			

			

				

					weixin_36480423的博客
				

				

					08-03
					
					6136
					
				

			

		

		

			
				
本篇文章为大家介绍一些CSS3新增的属性，CSS3新属性的出现弥补了CSS2版本的不足，解决了很多我们设置元素样式时的痛点。1.文本阴影属性text-shadow:水平距离 垂直距离 模糊半径(模糊程度) 阴影颜色说明：阴影水平距离设置为正数时向右移动，负数时向左移动、阴影垂直距离设置为正数时向下移动，负数时向上移动注意：模糊半径不能写负数，可以写多个文本阴影需要用逗号分隔 2.盒子阴影box-s...

			
		

	



              


  
              

                


	

		

			

				
					
CSS3新增特性

				
			

			

				

					m0_47743942的博客
				

				

					03-25
					
					1677
					
				

			

		

		

			
				
对css3新增特性进行简介，主要包括：新增长度单位、新增颜色设置方式、新增选择器、新增盒子属性、新增背景属性、新增边框属性、新增文本属性、新增渐变（本质背景图片）、新增字体、2D变换、3D变换、过渡、动画、过渡和动画对比、多列布局、伸缩盒模型、响应式布局、BFC、前端学习，并在最后补充了绝对定位元素的位置

			
		

	





	

		

			

				
					
CSS3新增属性

				
			

			

				

					2302_76678927的博客
				

				

					06-05
					
					1978
					
				

			

		

		

			
				
1.1  resize调整盒子大小：resize属性可以控制是否允许用户调节元素大小none ： 不允许调整元素大小both  ： 用户可以调节元素的宽高horizontal ： 用户可以调节元素宽度vertical ：用户可以调节元素高度1.2  box-shadow盒子阴影使用box-shadow属性为盒子添加阴影语法：值h-shadow ： 水平阴影的位置，必须填写，可以为负值v-shadow  ：垂直阴影的位置，必须填写，可以为负值。

			
		

	



		

			
		



	

		

			

				
					
CSS3新增特性（一）

				
			

			

				

					m0_48670609的博客
				

				

					04-22
					
					1481
					
				

			

		

		

			
				
CSS3新增内容，包括CSS3新增选择器：子级选择器、兄弟选择器、结构伪类选择器、伪元素选择器、属性选择器；CSS3盒模型；CSS3新增属性：边框圆角、文字阴影、盒子阴影、过渡属性。

			
		

	





	

		

			

				
					
16-CSS3新增选择器

				
			

			

				

					2401_87131285的博客
				

				

					03-26
					
					1726
					
				

			

		

		

			
				
CSS3新增选择器用法，表格隔行变背景

			
		

	





	

		

			

				
					
CSS3新增的属性

				
			

			

				

					qq_44845659的博客
				

				

					03-01
					
					6402
					
				

			

		

		

			
				
CSS 用于控制网页的样式和布局。
CSS3 是最新的 CSS 标准。
CSS3新增了很多的属性，下面一起来分析一下新增的一些属性：
1.CSS3边框：
border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid;
box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。

			
		

	





	

		

			

				
					
前端CSS：CSS3新增伪类与伪元素

				
			

			

				

					一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
				

				

					08-23
					
					1225
					
				

			

		

		

			
				
随着Web技术的发展，CSS3引入了一系列新的伪类和伪元素，极大地丰富了Web开发者的工具箱。这些新增的伪类和伪元素不仅增强了网页的表现力，还提供了更多的交互性和可定制性选项。本文将详细介绍CSS3中新增的伪类与伪元素，通过丰富的示例和实用的技巧帮助开发者更好地理解和应用它们。通过本文的学习，你已经掌握了CSS3中新增的伪类与伪元素的基础知识，以及它们在实际开发中的应用方法。/* 选择属于其父元素从后往前数的第2个类型的子元素 *//* 选择属于其父元素的第2个类型的子元素 */

			
		

	





	

		

			

				
					
CSS3 新增选择器

				
			

			

				

					JJ_Smilewang的博客
				

				

					03-31
					
					1612
					
				

			

		

		

			
				
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。主要包括结构伪类选择器和伪元素选择器。

1. 结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 。

1.1 E:first-child

E:first-child 这个选择器用于匹配父元素中的第一个子元素E



/* 1.表示选择ul里面的第一个孩子 ，若第一个孩子是li元素，那么背景色就会变成粉色，
但是如果ul的第一个孩子不是li元素，那么就不会执行该样式*/
   ul li:f

			
		

	





	

		

			

				
					
CSS3新增了哪些新特性？

				
			

			

				

					u012138854的博客
				

				

					11-07
					
					5219
					
				

			

		

		

			
				
即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观。动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬。background-size属性常用来调整背景图片的大小，主要用于设定图片本身。通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。当我们设置背景图片时，图片是会以左上角对齐，但是是以。

			
		

	





	

		

			

				
					
CSS：CSS3新增属性

				
			

			

				

					01-08
				

			

		

		

			
				
CSS3新增属性 1、border-radius：圆角边框  border-radius:10px 20px 30px 40px; /*圆：值为半径*/ border-radius:10px 20px 30px 40px/20px 30px 40px 50px; /*椭圆*/ 2、box-sizing：改变盒模型的模式  box-sizing...

			
		

	





	

		

			

				
					
CSS3新增盒模型属性.html

				
			

			

				

					06-09
				

			

		

		

			
				
CSS3新增盒模型属性的知识点包括以下方面：  1. 盒模型概述：在CSS3中，盒模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。盒模型是CSS布局的基础，所有的HTML元素都可以看作是一个盒子。...

			
		

	





	

		

			

				
					
css3新增颜色表示方式分享

				
			

			

				

					09-25
				

			

		

		

			
				
二、CSS3新增颜色表示方式  1. RGBA模式  在RGB基础上增加了Alpha通道，用于控制颜色的透明度。例如，rgba(255,0,0,0.5)表示半透明红色。这使得开发者可以创建具有透明效果的颜色，丰富了网页设计的视觉效果。  2. ...

			
		

	





	

		

			

				
					
css3新增属性，包含布局与对齐、视觉效果与装饰等

				
			

			

				

					11-02
				

			

		

		

			
				
首先，布局与对齐方面，CSS3新增了多种布局模式，如弹性盒子模型（Flexbox）和网格布局（Grid），这为开发者提供了更灵活的布局选项。弹性盒子模型允许设计师以更直观的方式排列容器内的项目，而网格布局则提供了一...

			
		

	





	

		

			

				
					
CSS3DRenderer+ CSS3DObject实现在 Three.js 中添加文本内容

				
			

			

				

					ZHANG_666
				

				

					08-20
					
					601
					
				

			

		

		

			
				
给大家分享一下如何通过 CSS3DRenderer+CSS3DObject 实现，在 three.js 场景中添加文本效果

			
		

	





	

		

			

				
					
 生成一个竖直放置的div，宽度是350px，上面是标题固定高度50px，下面是自适应高度的div，且有滚动条

					
最新发布

				
			

			

				

					walle的博客
				

				

					08-23
					
					89
					
				

			

		

		

			
				
【代码】 生成一个竖直放置的div，宽度是350px，上面是标题固定高度50px，下面是自适应高度的div，且有滚动条。

			
		

	





	

		

			

				
					
CSS封装大屏自定义组件（标签线）

				
			

			

				

					daimaxiaodao的博客
				

				

					08-19
					
					225
					
				

			

		

		

			
				
本文介绍了一个Vue组件DataLine.vue的实现，用于创建带圆点和折线的数据标签装饰线。

			
		

	





	

		

			

				
					
css的white-space: pre

				
			

			

				

					qq_51035159的博客
				

				

					08-22
					
					232
					
				

			

		

		

			
				
简单来说，这个组件的核心就是让用户能够粘贴任何文本内容（特别是配置文件、JSON等），并且保证粘贴的内容格式完全不变，然后可以原样发送给后端处理。- white-space: pre ：这是最关键的CSS属性，确保所有空格、制表符、换行符都被保留。- 用户粘贴的内容会完整存储在 inputJson.value 中，包括所有格式字符。- 使用Vue3的 v-model="inputJson" 实现双向数据绑定。- wrap="off" ：防止浏览器自动换行，保持原始的行结构。- 聚焦时的视觉反馈。

			
		

	





	

		

			

				
					
Vue 自定义指令

				
			

			

				

					前端小巷子的博客
				

				

					08-20
					
					516
					
				

			

		

		

			
				
在 Vue 中，组件负责“可见”的 UI，自定义指令则负责“不可见”的底层 DOM 行为。当你需要直接操作节点、监听第三方库、或封装浏览器原生 API 时，指令往往比组件更轻量、更灵活。Vue 为自定义指令设计了五条钩子函数，覆盖从首次绑定到最终解绑的完整生存周期。

			
		

	





	

		

			

				
					
css3新增颜色表达式

				
			

			

				

					06-10
				

			

		

		

			
				
CSS3新增了一种颜色表达式，即rgba()，它与之前的颜色表示方式不同，可以在颜色值中加入透明度的值，范围从0到1，表示颜色的不透明度。例如，rgba(255, 0, 0, 0.5)表示红色，不透明度为50%。此外，CSS3还新增了hsla()颜色表达式，它与rgba()类似，但是使用的是色相、饱和度和亮度三个值来表示颜色。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值