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