CSS3新增1

CSS3 新增长度单位

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

vw 视口宽度的百分之多少

vh 视口高度的百分之多少

vmax 视口宽高中大的哪个的百分之多少

vmin 视口宽高中小的哪个的百分之多少

CSS3 新增颜色设置方式

rgba、hsl、hsla

CSS3 新增选择器

动态伪类、目标伪类、语言伪类、UI 伪类、结构伪类、否定伪类、伪元素

CSS3 新增盒子模型相关属性

box-sizing 怪异盒模型

可选值

content-box width 和 height 设置的是盒子内容去大小（默认值）

border-box width 和 height 设置的是盒子总大小（怪异盒模型）

resize 调整盒子大小

可选值 需要和 overflow 配合

none 不允许调整（默认）

both 用户可以调整宽高

horizontal 用户可以调整宽

vertircal 用户可以调整高

box-shadow 盒子阴影

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

h-shadow 水平阴影的位置，必须写

v-shadow 垂直阴影的位置，必须写

blur 模糊距离，可选

spread 外延值，可选

color 颜色，可选

inset 将外部阴影改成内部阴影

opacity 不透明度

 为整个元素添加不透明度，值是 0 - 1 之间的小数，0 是完全透明，1 是完全不透明

CSS3 新增背景相关属性

 background-origin 设置背景图从那开始铺

值：padding-box，从 padding 区域（左上角）开始显示背景图像，默认值

border-box，从 border 区域（左上角）开始显示背景图像

content-box，从 content 区域（左上角）开始显示背景图像

background-clip 设置背景图的向外裁剪区域

值：border-box，从 border 区域开始向外裁剪背景，默认

padding-box，从 padding 区域开始向外裁剪背景

content-box，从 content 区域开始向外裁剪背景

text，背景图只呈现在文字上，需要和 color: transparent 一起使用，需要加前缀

background-size 设置背景图的尺寸

值：像素值

百分比

auto 背景图片真实大小，左上角对齐，显示在容器中

contain 背景图片等比例缩放，使背景图片的宽或高（大的）与容器宽或高相等，再将完整背景放在容器内，可能导致容器部分区域没有背景图片

cover 背景图片等比例缩放，使背景图片的宽或高（小的）与容器的宽或高相等，图片会尽可能显示在容器上，背景图片可能显示不完整

background 复合属性

background: color url repeat position /size origin clip（这俩顺序不能变 其他可以）

CSS3 边框相关属性

边框圆角

边框外轮廓 了解

outline 不占位 不参与盒子计算

新增文本属性

text-shadow 文本阴影

text-shadow：h-shadow（必须写）v-shadow（必须写）blur color;

white-space 文本换行

white-space：normal/pre/pre-wrap(在 pre 基础上，超出元素边界自动换行)/pre-line(pre-wrap 基础上，只识别换行，空格会忽略)/nowrap（强制不换行）

text-overflow 文本溢出 需要和 overflow:hidden white-space:nowrap 配合使用

text-flow:clip（当内联内容溢出时，将溢出部分裁切掉 默认）/ ellipsis（当内联内容溢出时，将溢出部分替换为 …）

-web-kit-text-stroke 文本描边

CSS3 新增渐变

线性渐变 background-image:linear-gradient()

background-image:linear-gradient(red,yellow,green) 默认从上到下渐变

background-image:linear-gradient(to right, red,yellow,green) 使用关键词设置线性渐变方向

background-image:linear-gradient(20deg,red,yellow,green) 使用角度设置线性渐变方向

background-image:linear-gradient(red 50px,yellow 100px,green 150px) 调整开始渐变的位置，0-50px 是纯红，50-100px 渐变，100px 纯黄，100-150px 渐变，150px 和 150 之后纯绿

径向渐变 background-image:radial-ggradient()

background-image:radial-ggradient(red,yellow,green)，默认从圆心四散，不一定是正圆

background-image:radial-ggradient(at right top,red,yellow,green) 使用关键词改变渐变圆圆心位置

background-image:radial-ggradient(at 100px 50px, red,yellow,green) 使用像素值改变渐变圆圆心位置

background-image:radial-ggradient(circle, red,yellow,green) 使用关键词将渐变圆改为正圆

background-image:radial-ggradient(100px 50px, red,yellow,green) 调整形状半径

background-image:radial-ggradient(red 50px,yellow 100px,green 150px) 调整开始渐变的位置

重复渐变 在前两种渐变前 +repeating