1、背景
background属性是八个属性的简写形式：
- background-image 指定一个文件或生成的颜色渐变作为背景图片
- background-position 设置图片的初始位置
- background-size 指定背景图片的渲染尺寸
- background-repeat 是否平铺图片
- background-origin 决定背景相对于元素的边框盒、内边距盒（初始值）、或内容盒子来定位
- background-clip 指定背景是否应该填充边框盒（初始值）、内边距盒、或内容盒子
- background-attachment 是否指定背景图片随着元素上下滚动（初始值）还是固定在视口区域，如果使用fixed，会对页面性能产生负面影响
- background-color 指定纯色背景，渲染到背景图片下方
2、背景渐变
线性渐变函数 linear-gradient()
重复渐变函数 repeating-linear-gradient()
径向渐变函数 radial-gradient()
同心圆环函数 repeating-radial-gradient()
1、linear-gradient
这个函数使用三个参数来定义行为：角度、起始颜色、终止颜色。
角度可以使用deg，也可以形象地用 to right、to bottom right等（0 deg为正上方，度数增加，往顺时针旋转）。
rad为弧度，2π大约为6.2832弧度，即π=3.14 rad。
过渡型：
如：
background-image:linear-gradient(to top, red, white, blue);则背景自下往上从红色（0%）慢慢过渡到白色（50%）再慢慢过渡到蓝色（100%）；
也可以给每个颜色节点指定明确的位置：
如：
background-image:linear-gradient(to top, red 0%, white 50%, blue 100%);将得到一样的效果。
条纹型：
如果在同一个位置设置两个颜色节点，那么渐变会直接从一个颜色变换到另一个颜色，而不会平滑过渡。
如：
background-image:linear-gradient(to top, red 40%, white 40%,white 60%, blue 60%);
2、重复渐变：
background-image: repeating-linear-gradient(
135deg,
#57b,
#57b 10px,
#148 10px,
#148 20px
);
3、径向渐变：
background-image: radial-gradient(white, blue); /* 椭圆 */
background-image: radial-gradient(circle, white, blue); /* 圆形渐变*/
/* 大小为3em，距离左侧和右侧边框都是60px，当使用百分数时，为自身大小的百分数*/
background-image: radial-gradient(3em at 60px 60px, white, blue); 
/* 指定颜色节点位置的径向渐变*/
background-image: radial-gradient(
circle,
midnightblue 0%,
white 75%,
red 100%
);
4、同心圆环渐变
/* 重复渐变生成条纹效果 */
background-image: repeating-radial-gradient(
circle,
midnightblue 0,
midnightblue 1em,
white 1em,
white 2em
); 
3、阴影
box-shadow为元素盒阴影、text-shadow文字阴影。
box-shadow可以应用于任何元素，而text-shadow只能应用于文本元素。
两者的不同之处：text-shadow 没有阴影扩展。
box-shadow: h-shadow v-shadow blur spread color inset;
text-shadow: h-shadow v-shadow blur color;
box-shadow：inset 2px 2px black；第一个参数 inset 使边缘阴影出现在元素的内部。
4、过渡 transition
4-1、基本使用
transition是一个简写属性，依次分别代表四个值：transition-property（生效的属性）、transition-duration（持续的时间）、transition-timing-function（定时函数）、transition-delay（执行前的延迟时间）。
transition-property 初始值为关键字all，表示所有属性都生效，如果只有某个属性需要过渡，可以直接指定属性名，如 transition: color；如 transition: color,font-size ;
transition-duration、transition-delay用秒s或毫秒ms指定，带单位。
transition-timing-function控制过渡过程中变化率如何加速或减速，可以是一个关键字，如linear或ease-in等。
等价的写法：
transition: border-radius 0.3s linear, background-color 0.6s ease-in;
/* 等价于：*/
transition-property：border-radius, background-color;
transition-duration:0.3, 0.6s;
transition-timing-function:linear, ease-in;4-2、关于定时函数：
linear：匀速
ease：低速开始，然后加速，在结束前变慢
ease-in：加速
ease-out：减速
ease-in-out：低速开始和结束
注意：
不是所有属性都可以添加过渡效果，display就是其中之一。不能在display:none;和display:block; 等之间过渡。
5、 变换 transform
注意，变换不能作用在行内元素上
5-1、二维变换
1）、旋转：rotate(xx deg) —— 元素绕着一个轴心（默认是中心）旋转一定角度。默认围绕Z轴旋转。Z轴正方向就是垂直于屏幕向外的方向。
2）、平移：translate(xx px/%...) —— 元素向上、下、左、右方向移动，类似相对定位，使用百分比是相对自身元素的大小来变化。
可以指定两个参数，第一个参数是x轴正方向，第二个参数是y轴正方向。使用负值那就是反方向。
3）、缩放：scale( xxx ) —— 缩小或放大元素，数值为放大的倍数，无单位。
4）、倾斜：skew(xxx deg) —— 使元素变形、顶边划向一个方向，底边划向相反方向。
以上每一种变换函数都是transform属性的值。
写法：
transform：skew(20deg) scale(0.5); /* 多个属性用空格隔开 */通常将 translate() 放在最后执行，在代码的顺序中要放在首位。
变换是围绕元素的基点展开的（除了 translate 是整体行为），可以通过 transform-origin 属性改变基点的位置，如：
transfrom-origin: right center;
transfrom-origin: 100% 50%;是等效的，都将基点设置为最右侧中间的位置。还可以通过px、em等的长度值来指定。
5-2、三维变换：
分别指定平移的方向：translateX()、translateY()、translateZ()。
分别指定转动的方向：rotateX()、rotateY()、rotateZ()。
为页面添加3D变换之前，要确定好透视距离 perspective()，这是十分重要的，不然3D效果不明显或者根本看不到。
透视距离比较小时，那么3D效果就比较明显；如果透视距离比较大，则3D效果就会比较弱。
可以通过两种方式指定透视距离：
1) 在需要观察的元素中设置 perspective() 变换；如：
transform:perspective(100px) rotateX(30deg);2) 在需要观察的元素的父元素中设置 perspective 属性；为祖先元素设置perspective属性可以使多个元素共享相同的透视距离。如：
perspective：200px;perspective-origin属性设置观察的位置，默认是位于元素的正前方。如：
perspective-origin：left bottom；6、动画 @keyframes
@keyframes 用来定义动画规则，为元素添加 animation 属性即为元素添加指定动画。
animation是几个属性的简写：
1)、animation-name 设置动画的名称
2)、animation-duration 动画的持续时长（300ms、1s）
3)、animation-timing-function 动画函数（和渐变中的函数是基本一样的，如ease、linear等）
4)、animation-delay 延迟多长时间后再播放
5)、animation-iteration-count 循环播放次数（2、infinite 无限重复播放）
6)、animation-direction 动画的播放方向
7)、animation-fill-mode 动画不播放时，要应用到元素的样式（播放前和播放后）
关于 animation-direction：
关于 animation-fill-mode：
注意：当出现了样式层叠，那么动画中设置的规则比其他声明拥有更高的优先级。
.animation{
width: 100px;
height: 100px;
border: 1.5px solid black;
border-radius: 0.5rem;
animation: myanimation 4s linear 1s infinite; /*给当前元素添加动画效果 */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
/* 动画名称 持续时间 时间函数 延迟 播放次数 是否在下一周期逆序播放 当动画不在播放时（未开始或已完成）要应用到元素上的样式 */
} @keyframes myanimation{ /* 给动画命名 */
0%{ /* 动画的关键帧 开始 0%*/
opacity: 0;
background-color: hsl(230,75%,50%);
transform: translate(100px , 100px);
}
50%{ /* 中间 */
opacity: 1;
background-color: hsl(150,75%,50%);
transform: translate(500px ,500px);
}
100%{ /* 结束时 */
opacity: 0;
background-color: hsl(230,75%,50%);
transform: translate(100px ,100px);
}
}动画帧也可以使用 from-to，等价于0% ~ 100%：
@keyframes myanimation2{
from{
opacity: 0;
transform: translate(-200px, -200px) scale(2);
}
to{
opacity: 1;
transform: translate(0, 0) scale(1);
}
}7、关于颜色的使用
1、使用十六进制的形式：
如 #1A2B3C4F
其中前面两位（1A）代表红色的取值，紧随的两位（2B）表示绿色的取值，再后面两位（3C）表示蓝色的取值 ，最后两位（4F）的取值表示透明度的大小。
这里将两位分成一组，每一组的取值为0-255，要转换成十六进制，即00-FF，值越大，代表该颜色越深。最终的结果是由前三组的值（红绿蓝调制）混合而成，再加上最后一组表示透明度，最后一组的值越小，则越透明。
对于前三组确定颜色：
当第一组的值大，而另外两组的值较小，如#aa0123，则颜色偏红。
当第二组的值大，而另外两组的值较小，如#11AA22，则颜色偏绿。
当第三组的值大，而另外两组的值较小，如#1234AA，则颜色偏蓝。
当第一、二组的值较大于第三组时，偏黄色（由红色和绿色生成）。
当第二、三组的值较大于第一组时，偏青色。
当第一、三组的值教大于第二组时，偏紫红色。
当三组的值都相当时，整体由小到大改变，则颜色由黑到白改变。
在前三组中，若其余两组不变，另外一组的数变大（或一组不变，其余两组变小），则该组对应的颜色会加深影响；如果该组取值减少，则由另外两组确定的颜色加深。
2、使用hsl()函数表示颜色
该函数包含三个参数，分别代表色相、饱和度、明度（或者光度）。书写格式如：hsl(240, 100%, 50%); 代表蓝色blue。
第一个参数色相是介于0 ~ 359之间的整数值，代表色相环上的360°。从红色（0）、黄色（60）、绿色（120）、青色（180）、蓝色（240）、洋红色（300）依次过渡。
第二个参数饱和度是代表色彩强度的百分数100%时颜色最鲜艳，0%意味着没有色彩，只是一片灰色。
第三个参数明度代表颜色有多亮或者多暗。明度值设置的越高，颜色越浅，100%就是纯白色；设置得越低，颜色越暗，0%就是黑色。一般设置50%是最鲜艳的。
8、改变滚动条的样式
在CSS中，可以使用 -webkit-scrollbar 来自定义滚动条的外观。该属性提供了七个伪元素：
1）::-webkit-scrollbar：整个滚动条
2）::-webkit-scrollbar-button：滚动条上的按钮（上下箭头）
3）::-webkit-scrollbar-thumb：滚动条上的滚动滑块
4）::-webkit-scrollbar-track：滚动条轨道
5）::-webkit-scrollbar-track-piece：滚动条没有滑块的轨道部分
6）::-webkit-scrollbar-corner：当有垂直和水平滚动条时，两者交汇的部分
7）::-webkit-resizer：右下角可拖动位置（类似textarea右下角可拖动的部分）
<div class="outer">
<div class="inner"></div>
</div> .outer{
width: 400px;
height: 400px;
overflow: auto;
scrollbar-width: 30px;
border: 2px solid black;
}
.outer::-webkit-scrollbar{
width: 30px;
height: 100%;
}
.outer::-webkit-scrollbar-thumb{
background-image: linear-gradient(to bottom, #ff8800, #e1f831);
border-radius: 30px;
border: 2px solid black;
}
.outer::-webkit-scrollbar-track{
background-image: linear-gradient(to top, rgba(220, 220, 251, 0.8), rgba(182, 182, 182, 0.8));
border: 1px solid black;
}
.inner{
height: 1200px;
width: 100%;
background-image: linear-gradient(to top,rgba(255, 192, 203, 0.261), rgba(135, 207, 235, 0.689));
}
9、选择器汇总
1、基础选择器
标签选择器，如 div{}、p{}、span{}
类选择器，如 .myclass{}、.yourClass{}
id选择器，如 #yourId、#elseId
通用选择器：*{}，匹配所有元素，优先级最低
2、组合选择器
子组合器(>，选择的是直接后代)：.parent > .children{}、div > .child{}
相邻兄弟组合器(+，选择的是该元素同级的后一个元素)：p + h2、div + div
通用兄弟组合器(~，匹配所有跟随在指定元素后面的兄弟元素)：div ~ p
复合选择器（多个基础选择器的连接，没有空格）：div.mydiv
3、伪类选择器
伪类选择器的优先级等价于一个类选择器（0,1,0）
1）:first-child：匹配当前元素的父元素的第一个子元素
2）:last-child：匹配当前元素的父元素的最后一个子元素
3）:only-child：匹配当前元素的父元素的唯一一个子元素（如果子元素是唯一的话）
4）:nth-child(an+b)：匹配当前元素同类型的兄弟元素中位置特定的元素，n从0开始代入
<div class="outer">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
<div class="mydiv">
<div>1234</div>
<span>1234</span>
<section>1234</section>
<div>1234</div>
<h1>1234</h1>
<p>1234</p>
</div>
</div> li{
margin: 6px 0;
}
li:nth-child(2n + 1){
background-color: brown;
}
.mydiv{
border: 2px solid pink;
}
.mydiv > :nth-child(2n){
background-color: brown;
}
5）:nth-last-child(an+b)：类似于:nth-child()，从最后往前数
6）:first-of-type：根据拥有相同标签名的子元素中的数字顺序查找第一个原素
7）:last-of-type：匹配当前元素的父元素下，每种类型的最后一个子元素
8）:only-of-type：匹配当前元素的父元素下，指定类型的唯一一个子元素（如果唯一则匹配）
9）:not(<selector>)：匹配的元素不匹配括号中的选择器
<div class="outer">
<ul>
<li>1111</li>
<li>2222</li>
<li class="myli">3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</div> li{
margin: 6px 0;
}
li:not(.myli){
background-color: brown;
}
10）:empty：匹配的元素必须没有子元素
11）:focus：获得焦点的元素（click、touch、按tab键导航）
12）:hover：鼠标悬浮于其上时应用该样式
13）:root：匹配文档根元素（html）
14）:disabled：匹配已经禁用的元素
15）:enabled：匹配已启用的元素
16）:checked：匹配复选框、单选框等被选中的元素
17）:invalid：匹配有非法输入值的元素，如 input 的 type="number" 但输入了汉字
18）:valid：匹配有合法值的元素
19）:required：匹配设置了 required 属性的元素
20）:nth-of-type(an+b)：根据目标元素的类型按指定的数组顺序进行匹配
<div class="outer">
<div style="border: 3px solid pink;">
<p>1234</p>
<div>666</div>
<span>666</span>
<p>1234</p>
<section>666</section>
<p>1234</p>
<p>1234</p>
<p>1234</p>
<h2>666</h2>
</div>
<p>1234</p>
<p>1234</p>
<p>1234</p>
</div> p:nth-of-type(2n){
background-color: brown;
}
p:nth-of-type(2n + 1){
background-color: beige;
}
21）:nth-last-of-type：基本同上，是从末尾开始匹配
4、伪元素选择器
伪元素选择器的优先级等价于一个标签选择器（0,0,1）
1）::before：将成为匹配元素的第一个子元素。默认为行内元素，可以用于插入文字、图片或构建形状。需指定content属性才能让元素显现
2）::after：将成为匹配元素的最后一个子元素。同上。
3）::first-letter：用于指定匹配元素的第一个文字字符的样式
4）:first-line：用于指定匹配元素的第一行文本的样式
5）::selection：用于指定用户使用鼠标高亮选择的任意文本的样式，通常用来改变选中文本的背景。这个伪元素选择器只有几个属性可以使用：color、background-color、cursor、text-decoration。
5、属性选择器
属性选择器的优先级等价于一个类选择器（0,1,0）
1）[attr]：匹配的元素拥有指定的属性attr，而不管属性值是什么，如 input[disabled] 匹配 <input type="text" disable="false"/>
2）[attr="value"]：匹配的元素拥有指定的属性attr和值value，如 input[type="text"] 匹配<input type="text"/>
3）[attr^="value"]：匹配的元素拥有指定的属性attr，并且对应的值以value开头
4）[attr$="value"]：匹配的元素拥有指定的属性attr，并且以指定的值value结尾
5）[attr*="value"]：匹配的元素拥有指定的属性attr，并且属性值包含value在内
6）[attr~="value"]：匹配拥有指定属性attr，并且该属性值是以空格分隔的列表，该列表中含有value。如 input[class~="myInp"] 可以匹配 ：<input type="text" class="testInp myInp"/>