CSS3
CSS3
CSS3私有前缀
针对于一些不同版本的浏览器支持，CSS3需要在测试中的属性上加入前缀
在实际开发中，开发者并不需要关心这个前缀问题，如果真的需要支持旧版浏览器，webpack会自动帮我们加含有前缀的属性
CSS3新增长度单位
在css3中，除了rem、em单位之外，还存在vw和vh长度单位
vw利用视窗的width作为参考，wh利用视窗的height作为参考
wmax利用width和height数值大的作为参考
vmin利用width和height数值小的作为参考
在移动端常用这些长度单位
CSS3中新增的选择器和颜色
对于这两个知识点，在前面学习css的过程中已经讲完了
CSS3盒子模型
box-sizing
box-sizing属性有两个可选值，一个是content-box，这个也是默认值，使用的是标准盒模型，其盒子模型的width和height是内容区的宽高
还有一个属性值是border-box，使用怪异盒模型，其盒子模型的width和height是盒子总大小
使用怪异盒模型后，再配置border和padding属性时就会向内扩张，影响内容区大小而不是盒子总大小
resize
使用resize属性可以控制是否允许用户调节元素尺寸
- none：不允许用户调整大小（默认）
- both：用户可以调节元素的宽度和高度
- horizontal：用户可以调节元素的宽度
- vertical：用户可以调节元素的高度
box-shadow
box-shadow属性可以给元素添加阴影
- h-shadow：水平方向的阴影，必填项，可以为负值
- v-shadow：垂直方向的阴影，必填项，可以为负值
- blur：可选项，模糊距离
- spread：可选项，阴影的外延值
- color：可选项，改变阴影的颜色
- inset：可选项，将外部阴影改为内部阴影
opacity
opacity属性可以调整元素的透明度，其中可选值为0（完全透明）到1（完全不透明）
rgba和opacity是有区别的，opacity是设置该元素及其内容的透明度
rgba是单独调整颜色的透明程度
CSS3背景属性
background-origin
背景的起点，其默认值是padding-box，也就是图片默认是从内边距左上角顶点开始展开
- content-box：从内容区左上角顶点展开
- border-box：从边框的左上角顶点展开
background-clip
背景的裁剪，其默认值是border-box，也就是超出边框外的背景将会被裁剪
- content-box：超过内容区的内容会被裁剪
- padding-box：超过内边距的内容会被裁剪
- text：超过文本的内容会被裁剪（前置条件是将文字的字体颜色调整为transparent）
background-size
- 直接使用长度指定图片的大小
- 使用百分比指定图片的大小
- auto：背景图片的真实大小，默认值
- contain：将背景图片等比缩放，将长边放入容器中，需要注意，很有可能出现容器内存在空白的情况
- cover：将背景图片等比缩放，将短边放入容器中，需要注意，会有一部分图片没有显示出来的情况
多背景图
利用复合属性backgroud配置多个图片，并配置状态和位置，使用逗号分隔
backgroud: url("bg-lt.png") no-repeat left top,
url("bg-rt.png") no-repeat right top,
url("bg-lb.png") no-repeat left bottom,
url("bg-rb.png") no-repeat right bottom;
新增边框属性
border-radius
通过盒子的border-radius属性可以调整一个盒子的圆角
通过将border-radius设置为百分之50，可以将盒子调整成一个圆形
通过border-top-left-radius可以单独调整盒子的单独一个角来设置圆角
以此类推，其他三个角也可以通过这种方式配置
outline
通过盒子的outline属性来配置盒子的外轮廓
外轮廓不计算入盒子大小，并且不占位
outline-offset可以调整外轮廓的偏移量，并且这个属性不能写在复合属性中
新增文本属性
text-shadow
通过text-shadow属性为文本配置阴影，其配置方式和box-shadow方法类似，但不能配置内部阴影和外延值
white-space
通过该属性可以调整文本的换行逻辑
-
normal：默认值
-
pre：该属性值可以调整为容器内容按原文显示，类似pre标签的功能
-
pre-wrap：在pre效果的基础上，超出元素边界自动换行
-
pre-line：在pre效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略
-
nowrap：不换行，这个属性值很重要，通常搭配下面的文本溢出处理
text-overflow
通过该属性可以调整文本溢出的处理
该属性要搭配white-space: nowrap; 且 overflow: hidden;
- clip：超出的部分裁剪掉
- ellipsis：超出的部分以省略号代替
text-decoration
在css2中，我们就已经学会了这个属性，用以给文本添加划线，中划线，下划线等修饰
在css3中，这个属性有很多子属性，可以为划线更改样式，颜色等
text-decoration： overline solid blue;
渐变
线性渐变
配合js来循环调整角度，可以让渐变动起来
/* 默认从上到下渐变 */
background-image: linear-gradient(red,yellow,green);
/* 默认从上到下渐变，调整颜色占比 */
background-image: linear-gradient(red 50px,yellow 100px,green 150px);
/* to right从左到右渐变 */
background-image: linear-gradient(to right,red,yellow,green);
/* to right top 从左下到右上渐变 */
background-image: linear-gradient(to right top,red,yellow,green);
/* 20deg 自定义角度渐变 */
background-image: linear-gradient(20deg,red,yellow,green);
径向渐变
/* 默认从中心点向四周 */
background-image：radial-gradient(red,yellow,green)
/* 默认从中心点向四周,调整颜色占比 */
background-image：radial-gradient(red 50px,yellow 100px,green 150px)
/* at left top调整中心位置为左上 */
background-image：radial-gradient(at left top,red,yellow,green)
/* at left top调整中心位置为左上 */
background-image：radial-gradient(at left top,red,yellow,green)
/* at 100px 50px调整中心位置为坐标值 */
background-image：radial-gradient(at 100px 50px,red,yellow,green)
/* 通过circle关键字调整图形样式为正圆 */
background-image：radial-gradient(circle,red,yellow,green)
/* 通过像素调整图形样式为正圆 */
background-image：radial-gradient(100px 100px,red,yellow,green)
Web字体
引入.ttf
在CSS2中，我们使用font-family来调整字体，但该字体必须为用户电脑已安装的字体
在CSS3中，我们可以通过Web字体功能引入网络字体，或引入字体文件
@font-face{
font-family:"方正手迹";
src: url("./fonts/方正手迹.ttf")
}
定制web字体
中文的字体文件很大，使用完整的字体文件不现实，如果只需要对页面的几个字体进行单独定制再引入，可以通过该平台定制相关文字的字体
定制字体后的引入方式是相同的
字体图标
- 相比图片更加清晰
- 灵活性高，更方便改变大小、颜色、风格等
- 兼容性好，IE也支持
有三种使用字体图标的方案，且均可在线使用和下载使用