CSS3新增的语法（一）

1. CSS3 新增长度单位

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

2. CSS3 新增颜色设置方式

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

3. CSS3 新增选择器

CSS3 新增的选择器有：动态伪类、目标伪类、语言伪类、UI 伪类、结构伪类、否定伪类、伪元素。（前面的博客讲解过）

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

4.1. box-sizing 怪异盒模型

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

可选值	含义
content-box	width 和 height 设置的是盒子内容区的大小。（默认值）
border-box	width 和 height 设置的是盒子总大小。（怪异盒模型）

4.2. resize 调整盒子大小

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

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

！！！注意：需要与overflow配合使用，且overflow不能为visible（默认值）

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表示没有阴影
• 示例：

1. /* 写两个值，含义：水平位置、垂直位置 */
   box-shadow: 10px 10px;
2. /* 写三个值，含义：水平位置、垂直位置、颜色 */
   box-shadow: 10px 10px red;
3. /* 写三个值，含义：水平位置、垂直位置、模糊值 */
   box-shadow: 10px 10px 10px;
4. /* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */
   box-shadow: 10px 10px 10px red;
5. /* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */
   box-shadow: 10px 10px 10px 10px blue;
6. /* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
   box-shadow: 10px 10px 20px 3px blue inset;

4.4. opacity不透明度

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

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

5. CSS3 新增背景属性

background-origin， background-clip，background-size ，多背景图