2.1 新增长度单位

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

2.2 新增选择器

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

2.3 新增盒模型相关属性

2.3.1 BOX-SIZING怪异盒模型

2.3.2 resize调整盒子大小

使用时要加上overflow，值任意。

2.4.2 box-shadow盒子阴影

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

语法：

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

2.4.3 opacity

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

全不透明。

opacity 与 rgba 的区别在于

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

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

3.新增背景属性

3.1 background-origin

作用：设置背景图的原点。

语法

  1. padding-box ：从 padding 区域开始显示背景图像。—— 默认值
  2. border-box ： 从 border 区域开始显示背景图像。
  3. content-box ： 从 content 区域开始显示背景图像。

3.2 background-clip

作用：设置背景图的向外裁剪的区域。

语法

  1. border-box ： 从 border 区域开始向外裁剪背景。 —— 默认值
  2. padding-box ： 从 padding 区域开始向外裁剪背景。
  3. content-box ： 从 content 区域开始向外裁剪背景。
  4. text ：背景图只呈现在文字上。

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

3.3 background-size

作用：设置背景图的尺寸。

语法：

  1. 用长度值指定背景图片大小，不允许负值。
  2. 用百分比指定背景图片大小，不允许负值。
  3. auto ： 背景图片的真实大小。 —— 默认值
  4. contain ： 将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整

背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。

  1. cover ：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要

注意：背景图片有可能显示不完整。—— 相对比较好的选择

3.4. backgorund 复合属性

语法：

注意：

  1. origin 和 clip 的值如果一样，如果只写一个值，则 origin 和 clip 都设置；如

果设置了两个值，前面的是 origin ，后面的 clip 。

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

3.5 多背景图

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

1
2
3
4
5
/* 添加多个背景图 */
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;

4. 新增边框属性

4.1 边框圆角

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

border-radius:10px;

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

4.2 边框外轮廓

outline-width ：外轮廓的宽度。

outline-color ：外轮廓的颜色。

outline-style ：外轮廓的风格。

none ： 无轮廓

dotted ： 点状轮廓

dashed ： 虚线轮廓

solid ： 实线轮廓

double ： 双线轮廓

outline-offset 设置外轮廓与边框的距离，正负值都可以设置。

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

outline 复合属性

1
outline:50px solid blue;

5.新增文本属性

5.1文本阴影

语法：

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

5.2 文本换行

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

5.3 文本溢出

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

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

值， white-space 为 nowrap 值。

5.4 文本修饰

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

子属性及其含义：

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

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

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

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

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

5.5 文本描边

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

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

6.新增渐变

6.1 线性渐变

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

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

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

调整开始渐变的位置

1
2
3
4
5
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);

6.2 径向渐变

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

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

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

调整渐变形状为正圆

调整形状的半径 。

调整开始渐变的位置。

1
2
3
4
5
6
7
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)；/*调整开始渐变的位置*/

6.3 重复渐变

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

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

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

7.web字体

7.1基本用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@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- */
}
@font-face {
  font-family: "情书字体";
  src: url('./方正手迹.ttf');
}

7.2 字体图标

相比图片更加清晰。

灵活性高，更方便改变大小、颜色、风格等。

兼容性好， IE 也能支持。

License

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

Share

快来参与讨论吧~