当前位置：首页 > news >正文

四、CSS3

news 文章来源：https://blog.csdn.net/kkkkatoq/article/details/144529333 2025/5/15 10:58:59

一、CSS3简介

1、CSS3概述

CSS3 是 CSS2 的升级版本，他在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。
CSS在未来会按照模块化的方式去发展：https://www.w3.org/Style/CSS/current-work.html
CSS3 的新特性如下：
1、新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等。
2、新增了更好的视觉效果，例如：圆角、阴影、渐变等。
3、新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。
4、新增了全新的布局方案 —— 弹性盒子。
5、新增了 Web 字体，可以显示用户电脑上没有安装的字体。
6、增强了颜色，例如： HSL 、 HSLA 、 RGBA 几种新的颜色模式，新增 opacity 属性来控制透明度。
7、增加了 2D 和 3D 变换，例如：旋转、扭曲、缩放、位移等。
8、增加动画与过渡效果，让效果的变换更具流线性、平滑性。
..............

2、CSS3私有前缀

2.1 什么是私有前缀

如下代码中的 -webkit- 就是私有前缀

div {

width : 400px ;

height : 400px ;

-webkit- border-radius : 20px ;

}

2.2 为什么要有私有前缀

W3C 标准提出的某个CSS特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该CSS特性，在浏览器正式支持该CSS特性后，就不需要私有前缀了。
举个例字：

-webkit-border-radius: 20px;

-moz- border-radius : 20px ;

-ms- border-radius : 20px ;

-o- border-radius : 20px ;

border-radius : 20px ;

查询CSS3兼容性的网站：https://caniuse.com/

2.3 常见浏览器私有前缀

Chrome 浏览器： -webkit
Safari 浏览器： -webkit
Firefox 浏览器： -moz
Edge 浏览器： -webkit-
旧 Opera 浏览器： -o-
旧 IE 浏览器： -ms-

注意：

我们在编码时，不用过于关注浏览器私有前缀，不用绞尽脑汁的去记忆，也不用每个都去查询，因为常用的 CSS3 新特性，主流浏览器都是支持的，即便是为了老浏览器而加前缀，我们也可以借助现代的构建工具，去帮我们添加私有前缀。

二、CSS3基本语法

1、CSS3新增长度单位

1）rem 根元素字体大小的倍数，只与根元素字体大小有关。

2）vw 视口宽度的百分之多少 10vw 就是视口宽度的 10%
3）vh 视口高度的百分之多少 10vh 就是视口高度的 10%

视口宽度其实就是指整个浏览器页面得高度和宽度，设置上面两个单位时，当浏览器页面放大或者缩小时，对应的元素也会跟着放大或者缩小，永远占相同的比例。在移动端用的比较多。

4） vamx 视口宽高中大的那个百分之多少。（了解即可）
5）vmin 视口宽高中小的那个的百分之多少。（了解即可）

2、CSS新增颜色设置方式

CSS3 新增了三种颜色设置方式，分别是： rgba 、 hsl 、 hsla ，由于之前已经详细讲解，此处略过。

3、CSS3新增选择器

CSS3新增的选择器有：动态伪类、目标伪类、语言伪类、UI伪类、否定伪类、伪元素；这些在CSS2中已经详细讲解，此处略过。

4、CSS3新增盒模型相关属性

4.1 box-sizing 怪异盒模型

使用box-sizing 属性可以设置盒模型的两种类型：

可选值	含义
content-box	width 和 height 设置的是盒子内容区的大小。（默认值）
border-box	width 和 height 设置的是盒子总大小。（怪异盒模型）就是不管你的padding 还有 border 的大侠，我盒子的模型就是固定了。（比较有用）

4.2 resize 调整盒子大小

使用 resize 属性可以控制是否允许用户调节元素尺寸。

值	含义
none	不允许用户调整元素大小。（默认）
both	用户可以调节元素的宽度盒高度。
horizontal	用户可以调节元素的宽度。
vertical	用户可以调节元素的高度。

4.3 box-shadow 盒子阴影

使用 box-shadow 属性为盒子添加阴影。

语法：

box-shadow : h-shadow v-shadow blur spread color inset ;

各个值得含义：

值	含义
h-shadow	水平阴影得位置，必须填写，可以为负值
v-shadow	垂直阴影的位置，必须填写，可以为负值
blur	可选，模糊举例
spread	可选，阴影得外延值
color	可选，阴影的颜色
inset	可选，将外部阴影改为内部阴影

默认值：box-shadow：none 表示没有阴影
示例：

/* 写两个值，含义：水平位置、垂直位置 */

box-shadow : 10px 10px ;

/* 写三个值，含义：水平位置、垂直位置、颜色 */

box-shadow : 10px 10px red ;
/* 写三个值，含义：水平位置、垂直位置、模糊值 */

box-shadow : 10px 10px 10px ;

/* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */

box-shadow : 10px 10px 10px red ;

/* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */

box-shadow : 10px 10px 10px 10px blue ;

/* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */

box-shadow : 10px 10px 20px 3px blue inset ;

应用示例：鼠标放上去时，产生阴影，类似于被选中的效果。小米官网。

4.4 opacity不透明度

opacity 属性能为整个元素添加透明效果，值是 0 到 1 之间得小数，0 是完全透明得，1 表示完全不透明。

opacity 与 rgba 的区别？

opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。

rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

5、CSS3新增背景属性

5.1 background-origin

作用：设置背景图的原点
语法：
1、padding-box：从padding区域开始显示背景图像。--默认值
2、border-box：从border区域开始显示背景图像。
3、content-box：从content区域开始显示背景图像。

            /* 指定背景图 */background-image: url('./bg01.jpg');/* 背景图是否重复 */background-repeat: no-repeat;/* 背景图的起始点：padding-box 参考padding的边缘content-box 参考内容区的边缘*/background-origin: content-box;

5.2 backgroud-clip

作用：设置背景图的向外裁剪区域。
语法：
1、border-box：从border区域开始向外剪裁背景。--默认值
2、padding-box：从padding区域开始向外裁剪背景。
3、content-box：从content 区域开始向外裁剪背景。
4、text：背景图只呈现在文字上。

注意：若值为text，那么backgroun-clip 要加上 -webkit- 前缀。

            /* 设置背景图的向外裁剪区域，意思就是控制背景图的显示范围,超出某个区域以外的背景就不呈现了，padding-box 超出padding以外的区域不呈现content-box 超出content-box以外的区域不呈现背景图片跟背景颜色都受整个属性控制 */background-clip: content-box;

5.3 backgroud-size

作用：设置背景图的尺寸。
语法：
1、用长度值指定背景图片大小，不允许负值。

background-size: 300px 200px;

2、用百分比指定背景图片大小，不允许负值。

background-size : 100% 100% ;

3、auto：背景图片的真实大小。--默认值
4、contain：将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。

background-size: contain;

5、cover：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整。--相对比较好的选择

background-size: cover;

            /* 背景图大小 宽 和 高 */background-size: 400px 400px;/* 背景图大小参考其父元素的百分比 */background-size: 100% 100%;/* 背景图等比例缩放，直到被容器装下 */background-size: contain;/* 等比例缩放，尽可能显示全 */background-size: cover;

5.4 backgorund 复合属性

语法：

background: color url repeat position / size origin clip

注意：

1. origin 和 clip 的值如果一样，如果只写一个值，则 origin 和 clip 都设置；如果设置了两个值，前面的是 origin ，后面的 clip 。

2. size 的值必须写在 position 值的后面，并且用 / 分开。

/* background: 背景颜色 背景url 是否重复 位置 / 大小 原点 裁剪方式; */
background: red url('./bg03.jpg') no-repeat 10px 10px / 500px 500px border-box content-box;

5.5 多背景图

CSS3允许元素设置多个背景图片

/* 添加多个背景图 */

background : url ( ../images/bg-lt.png ) no-repeat ,
url ( ../images/bg-rt.png ) no-repeat right top ,
url ( ../images/bg-lb.png ) no-repeat left bottom ,
url ( ../images/bg-rb.png ) no-repeat right bottom ;

6、CSS3新增边框属性

6.1 边框圆角

在CSS3 中，使用border-radius 属性可以将盒子变成圆角。
同时设置四个角的圆角：

border-radius:10px;

分开设置每个角的圆角（几乎不用）：

属性名	作用
border-top-left-radius	设置左上角圆角半径： 1、一个值是正圆半径， 2、两个值分别是椭圆的x半径，y半径。
border-top-right-radius	设置右上角半径： 1、一个值是正圆半径， 2、两个值分别是椭圆的 x 半径，y 半径。
border-bottom-right-radius	设置右下角圆角半径： 1、一个值是正圆半径， 2、两个值分别是椭圆的x半径、y半径
border-bottom-left-radius	设置左下角圆角半径： 1、一个值是正圆半径 2、两个值分别是椭圆的x半径、y半径。

分开设置每个角的圆角，综合写法（几乎不用）：

border-raidus : 左上角 x 右上角 x 右下角 x 左下角 x / 左上 y 右上 y 右下 y 左下 y

            /* 圆角的半径为 50px ，当像素值为宽或高的一半时，会变成一个圆 */border-radius: 50px;/* 父元素宽或高的50% */border-radius: 50%;/* 单独设置左上角为圆角 *//* border-top-left-radius: 50px; *//* 100指的是横向的半径 50指的是纵向上的半径，类似一个椭圆 */border-top-left-radius:  100px 50px;/* 单独设置右上角为圆角 */border-top-right-radius: 50px;/* 单独设置左下角为圆角 */border-bottom-left-radius: 50px;/* 单独设置右下角为圆角 */border-bottom-right-radius: 50px;border-radius: 100px 50px 20px 10px / 50px 20px 10px 5px;

6.2 边框外轮廓（了解）

outline-width：外轮廓的宽度。
outline-color：外轮廓的颜色。
outline-style：外轮廓的风格。
none：无轮廓
dotted：点状轮廓
dashed：虚线轮廓
solid：实现轮廓
double：双线轮廓
outline-offset：设置外轮廓与边框的距离，政府之都可以设置。

注意：outline-offset 不是 outline 的子属性，是一个独立的属性。

outline复合属性：

outline:50px solid blue;

7、CSS新增文本属性

7.1 文本阴影

在CSS3中，我们可以使用 text-shadow 属性给文本添加阴影。
语法：

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

值	描述
h-shadow	必须写，水平阴影的位置，允许负值。
v-shadow	必须写，垂直阴影的位置。允许负值。
blur	可选，模糊的距离。
color	可选，阴影的颜色

默认值：text-shadow:none 表示没有阴影。

           text-shadow: 3px 3px 10px red;

7.2 文本换行

在CSS3中，我们可以使用 white-space 属性设置文本换行方式。
常用值如下：

值	含义
normal	文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值）
pre	原样输出，与pre标签的效果相同
pre-wrap	在pre效果的基础上，超出元素边界自动换行。
pre-line	在pre效果的基础上，超过元素边界自动换行，且只识别文本中的换行，空格会忽略。
nowrap	强制不换行

7.3 文本溢出

在CSS3中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。
常用值如下：

值	含义
clip	当内联内容溢出时，将溢出部分裁切掉。（默认值）
ellipsis	当内联内容溢出块容器时，将溢出部门替换为...。

注意：要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible

值， white - space 为 nowrap 值。

7.4 文本修饰

CSS3升级了 text-decoration属性，让其变成里复合属性

text-decoration : text-decoration-line || text-decoration-style || text-decoration-color

子属性及其含义：

text-decoration- line 设置文本装饰线的位置

none ：指定文字无装饰（默认值）
underline ：指定文字的装饰是下划线
overline ：指定文字的装饰是上划线
line-through ：指定文字的装饰是贯穿线

text-decoration-style 文本装饰线条的形状

solid ：实线（默认）
double ：双线
dotted ：点状线条
dashed ：虚线
wavy ：波浪线

text-decoration- color 文本装饰线条的颜色

7.5 文本描边

注意：文字描边功能仅 webkit 内核浏览器支持。

-webkit-text-stroke-width ：设置文字描边的宽度，写长度值。
-webkit-text-stroke-color ：设置文字描边的颜色，写颜色值。
-webkit-text-stroke ：复合属性，设置文字描边宽度和颜色。

8、CSS3新增渐变

8.1 线性渐变

多个颜色之间的渐变，默认从上到下渐变。

background-image: linear-gradient(red,yellow,green);

使用关键词设置线性渐变的方向。

background-image : linear-gradient ( to top , red , yellow , green );

background-image : linear-gradient ( to right top , red , yellow , green );

使用角度设置线性渐变的方向。

background-image : linear-gradient ( 30deg , red , yellow , green );

调整开始渐变的位置。

background-image: linear-gradient(red 50px,yellow 100px ,green 150px)

        .box {width: 300px;height: 200px;border: 1px solid black;float: left;margin-left: 50px;}.box1 {/* 默认从上到下的，从红 到 黄 到 绿 进行渐变,理论上可以加无限个渐变色*/background-image: linear-gradient(red,yellow,green);}.box2 {/* 从左往右进行渐变，起始颜色是第一个，最后一个绿色还可以写 to right top 往右上方向 等等 */background-image: linear-gradient(to right,red,yellow,green);}.box3{/*顺时针转30度进行渐变 */background-image: linear-gradient(20deg,red,yellow,green);}.box4{/* 50px时必须时纯红色 100px时必须是纯黄色 */background-image: linear-gradient(red 50px,yellow 100px,green);}.box5{/* 50px时必须时纯红色 100px时必须是纯黄色 */background-image: linear-gradient(20deg,red 50px,yellow 100px,green);font-size: 50px;text-align: center;line-height: 200px;font-weight: bold;color: transparent;-webkit-background-clip: text;}

8.2 径向渐变

多个颜色之间的渐变，默认从圆心四散，（注意：不一定是正圆，要看容器本身宽高比）

background-image : radial-gradient ( red , yellow , green );

使用关键词调整渐变圆的圆心位置

background-image: radial-gradient(at right top,red,yellow,green);

使用像素值调整渐变圆的圆心位置。

background-image: radial-gradient(at 100px 50px,red,yellow,green);

调整渐变形状为正圆。

background-image: radial-gradient(circle,red,yellow,green);

调整形状的半径。

background-image : radial-gradient ( 100px , red , yellow , green );

background-image : radial-gradient ( 50px 100px , red , yellow , green );

调整开始渐变的位置。

background-image: radial-gradient(red 50px,yellow 100px,green 150px);

8.3重复渐变

无论线性渐变，还是径向渐变，在还没有发生渐变的位置，继续进行渐变，就为重复渐变。

使用 repeating-linear-gradient 进行重复线性渐变，具体参数同 linear-gradient。
使用 repeating-radial-gradient 进行重复径向渐变，具体参数同 radial-gradient。

我们可以利用渐变，做出很多有意思的效果：例如横格纸、立体球等。

9、web字体

9.1 基本用法

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

语法（间歇方式）：

@font-face {

font-family : " 情书字体 " ;

src : url ( './ 方正手迹 .ttf' );

}

语法（高兼容性写法）：

@font-face {

        font-family : "atguigu" ;

        font-display : swap ;

        src : url ( 'webfont.eot' ); /* IE9 */

        src : url ( 'webfont.eot?#iefix' ) format ( 'embedded-opentype' ), /* IE6-IE8 */

                url ( 'webfont.woff2' ) format ( 'woff2' ),

                url ( 'webfont.woff' ) format ( 'woff' ), /* chrome 、 firefox */

                url ( 'webfont.ttf' ) format ( 'truetype' ), /* chrome 、 firefox 、 opera 、 Safari,

Android*/

        url ( 'webfont.svg#webfont' ) format ( 'svg' ); /* iOS 4.1- */

}

9.2 定制字体

中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。
可使用阿里 web 字体定制工具：https://www.iconfont.cn/webfont

9.3 字体图标

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

字体图标的具体使用方式，每个平台不尽相同，最好参考平台使用指南，视频中我们是以使用最多的阿里图标库作为演示。

阿里图标官网地址： https://www.iconfont.cn/

10、2D变换

前提：二维坐标如下所示：

10.1 2D位移

2D 位移可以改变元素的位置，具体使用方式如下：
1、先给元素添加转换属性 transform
2、编写 transform 的具体值，相关可选值如下：

值	含义
translateX	设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度的百分比。
translateY	设置垂直方向位移，需指定长度值；若指定的是百分比，是参考自身高度的百分比。
translate	一个值代表水平方向，两个值代表：水平和垂直方向。

3、注意点：

1、位移与相对定位很相似，都不脱离文档流，不会影响到其他元素。
2、与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身。
3、浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。
4、transform 可以链式编写，例如：

transform: translateX(30px) translateY(40px);
5、位移对行内元素无效。
6、位移配合定位，可实现元素水平垂直居中。

                .box {

position : absolute ;

                       left : 50% ;

                       top : 50% ;

                       transform : translate ( -50% , -50% );

                }

10.2 2D缩放

2D 缩放是指：让元素放大或缩小，就使用方式如下:
1、先给元素添加转换属性 transform
2、编写 transform 的具体值，相关可选值如下：

值	含义
scaleX	设置水平方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。
scaleY	设置垂直方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。
scale	同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放，两个值分别代表：水平缩放、垂直缩放。