写在前面

Hello大家好，我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！

写在前面

1. CSS3 简介

【其他系列】

1. CSS3 简介

1.1 CSS3 概述

CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。

CSS3 在未来会按照模块化的方式去发展：

https://www.w3.org/Style/CSS/current-work.html

CSS3 的新特性如下：

新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等。

新增了更好的视觉效果，例如：圆角、阴影、渐变等。

新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。

新增了全新的布局方案 —— 弹性盒子。

新增了 Web 字体，可以显示用户电脑上没有安装的字体。

增强了颜色，例如： HSL 、 HSLA 、 RGBA 几种新的颜色模式，新增 opacity 属性来控制透明度。

增加了 2D 和 3D 变换，例如：旋转、扭曲、缩放、位移等。

增加动画与过渡效果，让效果的变换更具流线性、平滑性。

1.2 CSS3私有前缀

什么是私有前缀

如下代码中的 -webkit- 就是私有前缀
div {
    width:400px;
    height:400px;
    -webkit-border-radius: 20px;
}
为什么要有私有前缀

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/

常见浏览器私有前缀

Chrome 浏览器： -webkit-

Safari 浏览器： -webkit-

Firefox 浏览器： -moz-

Edge 浏览器： -webkit-

旧 Opera 浏览器： -o-

旧 IE 浏览器： -ms-

注意：

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

2. CSS3新增的3个基本属性

2.1 CSS3 新增长度单位

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

vw 视口宽度的百分之多少 10vw 就是视口宽度的 10% 。

vh 视口高度的百分之多少 10vh 就是视口高度的 10% 。

vmax 视口宽高中大的那个的百分之多少。（了解即可）

vmin 视口宽高中小的那个的百分之多少。（了解即可）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>新增长度单位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
        }
        .box2 {
            width: 20vw;
            height: 20vh;
            background-color: green;
        }
        .box3 {
            width: 20vmax;
            height: 20vmin;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box1">像素</div>
    <div class="box2">vw和vh</div>
    <div class="box3">vmax</div>
</body>
</html>
2.2 CSS3 新增颜色设置方式

CSS3 新增了三种颜色设置方式，分别是： rgba 、 hsl 、 hsla

这些在 CSS2 中已经详细讲解：

地址：https://blog.csdn.net/qq_34025246/article/details/129918059

2.3 CSS3 新增选择器

CSS3 新增的选择器有：动态伪类、目标伪类、语言伪类、 UI 伪类、结构伪类、否定伪类、伪元素；

这些在 CSS2 中已经详细讲解：

地址：https://blog.csdn.net/qq_34025246/article/details/129903322

结语

本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力

【CSS3系列】第一章 · CSS3新增的三种基本属性

写在前面

1. CSS3 简介

1.1 CSS3 概述

1.2 CSS3私有前缀

2. CSS3新增的3个基本属性

2.1 CSS3 新增长度单位

2.2 CSS3 新增颜色设置方式

2.3 CSS3 新增选择器

结语

猜你喜欢