第5章
5.1背景颜色
1.background-color（背景颜色）:#baba35（十六进制）；
rgb（186,218,85）（十进制）；（红，绿，蓝）
blue（英文）；
hsl（74,64%，59%）；（角度，饱和度，亮度）
rgba（186,218,85，0.5（透明度））；
hsla（74,64%，59%，0.5（透明度））；
2.opacity（透明度）：0.5；
3.background-image（添加背景图片）：url（''）;
4.background-repeat（背景图片重复性）：repeat；（默认）
repeat-x；（x轴）
repeat-y；（y轴）
no-repeat；（不重复）
repeat repeat；（x轴 y轴）
space；（第一张和最后一张紧挨边缘）
around；（缩放，重复整数次）
5.3背景图片语法
1.background-position：50% 50%；（x方向 y方向）（左边 顶边）
right 10px top 10rpx；
2.background-position-x：
3.background-position-y：
4.background-position：calc（100%-1em） 50%；（计算长度）
5.background-clip（裁剪）：border-box；（默认）
padding-box；（剩下内边距盒子以内）
content-box；（剪掉内边距及之外）
6.background-origin（控制原点的位置）：和5一样
7.background-attachment（背景附着）：fixed；（背景图不动）
scroll；（相对固定）（元素本身）
local；（相对固定）（元素内容）
8.“
background-attachment:scroll或local;
overflow:auto或scroll;
(背景图片随内容移动)
”
9.background-size:400px 240px;(宽度 高度)
50% 50%;(图片随元素缩放而缩放)
contain;(图片尽量最大化，不改变宽高比)
over;(图片会压缩以保证覆盖元素的每一个像素，同时不变形)
10.黑科技：background-size:100% auto;(宽度100%，保持固定的宽高比)
11.background-image:url(),url(),url();(多重背景)(自上而下)
12.border-width:(所有边框)
border-top-width:(某条边框)
border-style(或border-right-style):solid;（实线）
dashed;dotted;
double;（绘制两条平行线）
groove;inset;
none;(删除全部边框)
border（简写属性）:2px solid #000;
13.border-radius:大小（圆角）
左上 左下 右下 右上;
14.border-top-left-radius:
border-top-right-radius:（某一圆角）
15.黑科技：border-radius:50%;(正方变圆形或长方变椭圆)
border-radius:999em;（生成半圆形，胶囊）
16.border-image（边框图片）:url() 40px(边框宽度);
5.6盒阴影
1.box-shadow:.25em .25em .5em rgba(0,0,0,0.3);(x轴偏移 y轴偏移 模糊半径 颜色)
2.box-shadow:.25em .25em .5em .5em rgba(0,0,0,0.3);(x轴偏移 y轴偏移 模糊半径 扩展半径 颜色)
3.box-shadow:inset .25em .25em .5em rgba(0,0,0,0.3);（inset触发镂空效果）
4.box-shadow:0 0 0 10px #1C318D,
0 0 0 10px #f5f5f5,
0 0 0 10px #1C318D,
0 0 0 10px #1C318D;（多阴影）
5.7渐变
1.background-image:linear-gradient(to bottom或90deg,#f5f5f5 0%,#000 100%);
(方向，颜色起点，颜色终点)；
方向：to（top;right;bottom（默认）;left;）
（top left;top right; bottom left; bottom right）
或直接用数值加deg，顺时针增加度数
一些细节见（书P123）
2.background-image:radial-gradient(circle closest-corner at 20% 30%,
#f5f5f5,#000);(放射渐变)
circle或ellipse
closest-side或farthest-side或closest-corner或
farthest-corner
3.background-image:radial-gradient(#f5f5f5,#000,#f5f5f5,#000,#f5f5f5,#000,);
（重复的放射性渐变）
4.background-image:radial-linear-gradient(#f5f5f5,#000 40px);
(重复次数由大小决定)（线性渐变）
background-image:radial-radial-gradient(#f5f5f5,#000 40px);
(重复次数由大小决定) （放射渐变）
5.渐变创造简单图案：background-image:linear-gradient(
transparent,
transparent 50%,
rgba(55,110,176,0.3) 50%
);
花格图案:background-image:linear-gradient(
transparent,
transparent 50%,
rgba(55,110,176,0.3) 50%
),
linear-gradient(
to right,
transparent 50%,
rgba(55,110,176,0.3) 50%
);
5.8
1.max-width:100%;(图片随容器缩小而缩小，变大不超出固有尺寸)
实用：img{
width:auto;
max-width:100%;
height:auto;
}
2.控制对象（img；video；object；）元素的方法
object-fit:fill;(默认)
contain;
cover;
none;
scale-down;(从none或contain选一个)
object-position:（与定位背景图片类似）
