css3私有前缀
私有前缀是为了让浏览器在 CSS3 规范还没有完全定稿时，能够试验性地实现新的 CSS 属性而引入,例如-webkit-border-radius
常见私有前缀
-webkit-:主要用于 Google Chrome 和 Safari 浏览器
-moz -：用于 Mozilla Firefox 浏览器
-ms -：用于 Microsoft Internet Explorer 浏览器
https://caniuse.com,浏览器属性兼容查询网站
新增长度单位-vw、vh、vmax、vmin
/ vw(viewport width)是一个相对长度单位 /
/ vw是基于视口(viewport)的宽度来计算的。1vw等于视口宽度的 1%。例如，如果视口的宽度是 1000px，那么 1vw就是 10px(1000px 1% = 10px) */
.box-test {
width: 50vw;
height: 50vw;
border: 1px solid #DD302D;
}
/ vh(viewport height)是基于视口(viewport)的高度进行计算的。1vh等于视口高度的 1%。例如，如果视口的高度是 600px，那么 1vh就是 6px(600px×1% = 6px) /
.box-test {
width: 50vh;
height: 50vh;
border: 1px solid #DD302D;
}
/ vmax是取视口宽度和视口高度两者中的最大值作为基准来计算的。1vmax等于视口宽度和视口高度最大值的 1% /
/ 相反vmin是取视口宽度和视口高度两者中的最小值作为基准来计算的。1vmin等于视口宽度和视口高度最小值的 1% /
.box-test {
width: 50vmax;
height: 50vmin;
border: 1px solid #DD302D;
}
新增盒子属性
box-sizing
box-sizing 用于改变默认的 CSS 盒模型中元素的宽高计算方式
/ content-box,标准盒模型，默认值，元素的宽度和高度只计算content，不包括padding、border和margin,盒子的可能会被撑出指定宽高 /
/ border-box，怪异盒模型， 元素的宽度和高度包括padding、border和margin，盒子不会撑出指定宽阔， /
.box-test {
width: 20px;
height: 20px;
background-color: deepskyblue;
box-sizing: border-box;
}
resize
可以控制是否允许用户调节元素尺寸，需要配合overflow使用
/ none,默认值，不允许调整 /
/ horizontal 可以调节元素高度 /
/ vertical 用户可以调节元素的高度 /
/ both 可以调节元素的宽度和高度 /
.box-test {
width: 20px;
height: 20px;
background-color: deepskyblue;
resize: horizontal;
overflow: auto;
}
box-shadow
用于给元素添加阴影效果
/ 两个值- 水平位置、垂直位置，可以是负值，必填 /
box-shadow: 10px 10px;
/ 三个值- 水平位置、垂直位置 颜色(默认黑色) /
box-shadow: 10px 10px blue;
/* 三个值- 水平位置、垂直位置 模糊程度 */
box-shadow: 10px 10px 20px;
/* 四个值- 水平位置、垂直位置、模糊程度、颜色*/
box-shadow: 10px 10px 20px deeppink;
/* 五个值- 水平位置、垂直位置、模糊程度、阴影外延值、颜色*/
box-shadow: 10px 10px 20px 20px deeppink;
/* 六个值- 水平位置、垂直位置、模糊程度、阴影外延值、颜色、内阴影*/
box-shadow: 10px 10px 20px 20px deeppink inset;
opacity
用于设置元素的不透明度
/ 0为 完全透明，1为完全不透明，可以使用中间的小数/
/ rgba 主要用于设置颜色的透明度，只影响颜色相关的属性 /
/ 使用opacity元素内部的所有内容，包括文本、图像、子元素等，都会统一受到该不透明度的影响 /
.box-test {
width: 200px;
height: 200px;
background-color: deepskyblue;
opacity: 0;
}
新增背景属性
background-origin
设置背景图的原点
/ 从padding区域开始显示背景图像-默认值/
background-origin: padding-box;
/ 从content区域开始显示背景图像 /
background-origin: content-box;
/ 从border区域开始显示背景图像 /
background-origin: border-box;
background-clip
用于规定背景的绘制区域
/ 默认值，边框以外的背景图、颜色不呈现 /
background-clip: border-box;
/ padding以外的背景图、颜色不呈现 /
background-clip: padding-box;
/ content以外的背景图、颜色不呈现 /
background-clip: content-box;
/ 背景只呈现在有文字上，其余部分不显示，需要与透明文字配合使用 /
color: transparent;
-webkit-background-clip: text;
background-size
用于控制背景图像的尺寸大小
/ 默认值-背景图的真实大小 /
background-size: auto;
/* 使用像素设置背景图的宽高 */
background-size: 200px 200px;
/* 使用百分比设置背景图的宽高 */
background-size: 100% 100%;
/* 将背景图等比例缩放、使背景图片的宽或高与容易的宽或高相等，将完整背景图片包含在容器内，可能会造成容器里部分区域没背景图 */
background-size: contain;
/* 将背景图等比例缩放、尽可能的完整的呈现背景图 ，背景图片有可能显示不完整 */
background-size: cover;
background-复合属性
/ 背景颜色、背景url、是否重复、位置 / 大小 原点 裁剪方式/
background: skyblue url("favicon.ico") no-repeat 10px 10px / 500px 500px border-box content-box;
多背景图
一个元素内可以设置多个背景图，并设置属性、指定位置
background: url("images/serch_icon.png") no-repeat left top,
url("images/serch_icon.png") no-repeat right top,
url("images/serch_icon.png") no-repeat left bottom,
url("images/serch_icon.png") no-repeat right bottom;
新增边框属性
