CSS3新特性汇总

扶苏1002

已于 2024-02-28 11:14:41 修改

阅读量1.4k

点赞数 25

分类专栏： CSS2+CSS3 文章标签： css3 css 前端

于 2024-02-24 09:03:18 首次发布

本文链接：https://blog.csdn.net/qq_44741577/article/details/136256747

版权

CSS2+CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

文章目录

一、CSS3 概述
二、CSS3 新特性

一、CSS3 概述

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

二、CSS3 新特性

CSS3 的新特性如下：

新增了更加实用的选择器，例如：动态伪类选择器（:link、:visited、:hover、:active等）、目标伪类选择器（:target）、伪元素选择器（::before、::after ）等等。
新增了更好的视觉效果，例如：圆角、阴影、渐变等。
新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。
新增了全新的布局方案 —— 弹性盒子。
新增了 Web 字体，可以显示用户电脑上没有安装的字体。
增强了颜色，例如： HSL 、 HSLA 、 RGBA 几种新的颜色模式，新增 opacity 属性来控制透明度。
增加了 2D 和 3D 变换，例如：旋转、扭曲、缩放、位移等。
增加动画与过渡效果，让效果的变换更具流线性、平滑性。
其他…

2.1. 新增长度单位

rem 根元素字体大小的倍数，只与根元素字体大小有关。
vw 视口宽度的百分之多少 10vw 就是视口宽度的 10% 。
vh 视口高度的百分之多少 10vh 就是视口高度的 10% 。
vmax 视口宽高中大的那个的百分之多少。（了解即可）
vmin 视口宽高中小的那个的百分之多少。（了解即可）

2.2. CSS3 新增颜色设置方式

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

2.2.1. rgb(css2) 或 rgba (css3)

编写方式： 使用红、黄、蓝这三种光的三原色进行组合。

r 表示红色 red
g 表示绿色 green
b 表示蓝色 blue
a 表示透明度 alpha值

/* 使用 0~255 之间的数字表示一种颜色 */
color: rgb(255, 0, 0);/* 红色 */
color: rgb(0, 255, 0);/* 绿色 */
color: rgb(0, 0, 255);/* 蓝色 */
color: rgb(0, 0, 0);/* 黑色 */
color: rgb(255, 255, 255);/* 白色 */
/* 混合出任意一种颜色 */
color: rgb(138, 43, 226) /* 紫罗兰色 */
color: rgba(255, 0, 0, 0.5);/* 半透明的红色 */
/* 也可以使用百分比表示一种颜色（用的少） */
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */

小规律：

若三种颜色值相同，呈现的是灰色，值越大，灰色越浅。
rgb(0, 0, 0) 是黑色， rgb(255, 255,255) 是白色。
对于 rbga 来说，前三位的 rgb 形式要保持一致，要么都是 0~255 的数字，要么都是百分比。

2.2.2. HEX 或 HEXA(css2)

HEX 的原理同与 rgb 一样，依然是通过：红、绿、蓝色进行组合，只不过要用 6位（分成3组）来表达，

格式为： #rrggbb
每一位数字的取值范围是： 0 ~ f ，即：（ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c,
d, e, f ），所以每一种光的最小值是： 00 ，最大值是： ff

color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */
/* 如果每种颜色的两位都是相同的，就可以简写*/
color: #ff9988;/* 可简为：#f98 */
/* 但要注意前三位简写了，那么透明度就也要简写 */
color: #ff998866;/* 可简为：#f986 */

2.2.3. HSL 或 HSLA (css3)

HSL 是通过：色相、饱和度、亮度，来表示一个颜色的，格式为： hsl(色相,饱和度,亮度)

色相(hue）：取值范围是 0~360 度，0是红色，120 是绿色，240 是蓝色。
饱和度 (saturation)：是一个百分比值，0% 表示灰色阴影，而 100% 是纯色，没有灰色阴影。
亮度 (lightness) ：也是百分比，0% 是黑色，50% 是既不明也不暗，100%是白色
具体度数对应的颜色如下图：

2.3. 新增选择器

CSS3 新增的选择器有：动态伪类、目标伪类、语言伪类、 UI 伪类、结构伪类、否定伪类
CSS选择器详解

2.4. 新增盒模型相关属性

2.4.1. box-sizing 怪异盒模型

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

2.4.2. resize 调整盒子大小

resize CSS 属性允许你控制一个元素的可调整大小性。（一定要配合overflow：auto使用）

<head>
  <meta charset="UTF-8" />
  <title>resize</title>
  <style type="text/css">
    .box1 {
      width: 100px;
      height: 100px;
      background-color: #bbffaa;
      resize: both;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
</body>

在这里插入图片描述

2.4.3. box-shadow 盒子阴影

使用 box-shadow 属性为盒子添加阴影。
语法： box-shadow: 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;

2.4.4. opacity 不透明度

opacity 属性能为整个元素添加透明效果（文字背景都会透明），值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完全不透明

opacity 与 rgba 的区别？

opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

2.5. 新增背景属性

CSS3新增背景属性

2.6. 新增边框属性

2.6.1. 边框圆角

在 CSS3 中，使用 border-radius 属性可以将盒子变为圆角。

同时设置四个角的圆角：

border-radius:10px;

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

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

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

2.6.2. 边框外轮廓（了解）

outline-width ：外轮廓的宽度。
outline-color ：外轮廓的颜色。
outline-style ：外轮廓的风格。
none ：无轮廓
dotted ：点状轮廓
dashed ：虚线轮廓
solid ：实线轮廓
double ：双线轮廓
outline-offset 设置外轮廓与边框的距离，正负值都可以设置。
注意： outline-offset 不是 outline 的子属性，是一个独立的属性。
outline 复合属性
outline: 50px solid blue;

2.7. 新增文本属性

2.7.1. 文本阴影

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

语法：
text-shadow: h-shadow v-shadow blur color;

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

2.7.2. 文本换行

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

常用值如下：

2.7.3. 文本溢出

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

常用值如下：

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

CSS超出文本省略号显示

2.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文本装饰线条的颜色

2.7.5. 文本描边

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

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

2.8. 新增渐变

2.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);

2.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);

2.8.3. 重复渐变

无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。
使用 repeating-linear-gradient 进行重复线性渐变，具体参数同 linear-gradient 。

2.9. 新增web 字体

2.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- */
}

2.9.2. 定制字体

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

2.9.3. 字体图标

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

2.13. 新增多列布局

作用：专门用于实现类似于报纸的布局。

常用属性如下：

column-count ：指定列数，值是数字。
column-width ：指定列宽，值是长度。
columns ：同时指定列宽和列数，复合属性；值没有数量和顺序要求。
column-gap ：设置列边距，值是长度。
column-rule-style ：设置列与列之间边框的风格，值与 border-style 一致。
column-rule-width ：设置列与列之间边框的宽度，值是长度。
column-rule-color ：设置列与列之间边框的颜色。
coumn-rule ：设置列边框，复合属性。
column-span 指定是否跨列；值: none 、 all 。