013 HTML+CSS(Class152 - 164)
[A] 背景拓展
background-size: 设置背景图的尺寸大小
参数：
a, b 用数字设置长和宽(px)
contain 包含，即背景图以最大尺寸呈现在父元素中
cover 覆盖，即背景图的局部充满整个父元素
background-origin: 设置背景图的填充位置
参数：
padding-box 背景填充在padding区域，默认值
border-box 背景填充在border区域
content-box 背景填充在content区域
background-clip:
padding-box 裁剪出padding区域的背景，默认值
border-box 裁剪出border区域的背景
content-box 裁剪出content区域的背景
【注】可写在background的符合样式中
[B] CSS背景颜色渐变
1. linear-gradient(point||angle, 颜色1 10%，颜色2 12%,......) 线性渐变
参数:
point||angle 方向可省略，默认从上到下, to形式和角度deg形式两种指定方向的方法
color 按顺序定义渐变颜色
percentage (red 25%, blue 50%, green 80%)
指0-20%为纯红色，20%-50%为红-蓝渐变色，50%-80%为蓝-绿渐变色，80%-100%为纯绿色
2. radial-gradient(point, 颜色1 10%，颜色2 12%,......) 圆形渐变
参数:
point 定义方向
color 按顺序定义渐变颜色
percentage (red 25%, blue 50%, green 80%)
指0-20%为纯红色，20%-50%为红-蓝渐变色，50%-80%为蓝-绿渐变色，80%-100%为纯绿色
【注】颜色渐变智能加在background-image上
[C] 文字图标
字体图标
阿里巴巴字体图标库：https://www.iconfont.cn
自定义图标
https://icomoon.io/app 在线生成自定义图标
[D] 文字阴影和盒子阴影
文字阴影
text-shadow: x y blur color; 文字阴影
参数：
x y: 分别需要向右向下偏移的量
blur： 模糊程度，值越大越模糊
color： 阴影的颜色
【注】
1. 阴影是在文字的下方的，不会覆盖原文字
2. 可以设置多层阴影，中间通过逗号隔开即可
网上可以搜到炫酷的文字阴影
盒子阴影
box-shadow:
参数：
x y: 分别需要向右和向下偏移的距离(px)
blur: 模糊程度，值越大越模糊(px)
spread： 阴影的扩散范围(px)
color： 阴影的颜色
inset： 在盒子内部显示阴影(outset的设置不起作用，默认为外阴影)
[E] 遮罩
mask:url("") no-repeat 10px 10px / 100px 100px;
参数：
url("") 遮罩图路径
no-repeat 遮罩图不重复
10px 10px / 100px 100px 偏移量和尺寸，偏移量可分别设置为center，即缩放时以中心为主。
【注】mask没有标准化，需使用-webkit-mask代替
box-reflect: below 20px url() linear-gradient()
参数：
below： 在下方显示倒影
20px： 倒影与原图的距离
url() / linear-gradient() 添加遮罩 / 透明度的线性渐变
【注】box-reflect没有标准化，需使用-webkit-box-reflect代替
扩展：
利用scale(-1)即可实现图片的翻转，另外还有scaleX(-1)、scaleY(-1)等
模糊
filter:blur(20px); 给元素添加模糊属性,值越大越模糊
cale计算
width: cale(100% - 100px); 宽度总是比父元素的宽度小100px
[H] 分栏属性
分栏布局
column-count: 分栏的栏数
column-width: 分栏的宽度
column-gap: 分栏的间距
column-rule: 分栏的边线(虚实线，宽度，颜色等)
column-span: 合并分栏
【注】分栏的栏数和宽度是相冲突的，两者只能设置一个
[ I ] 伪类和伪元素
css3中对伪类和伪元素做了明显的区分
css3规定伪类是在一个冒号后加伪类名，伪元素是在两个冒号后加伪元素名
伪类:同一个标签，根据其不同的状态，有不同的样式。这就叫做“伪类”。
伪类本质上是为了弥补css选择器的不足，以便获取更多的信息。通常获取不存在或者DOM树中的信息，
或者获取不能被常规css选择器获取的信息。
:hover
:focus
:empty
...
伪元素
伪元素本质上创建一个由内容的虚拟容器。这个容器不包含和DOM元素，但是可以包含内容。
另外开发者还可以为伪元素指定样式。
::selection
::first-line / first-letter
::before / after
...
