1.选择器：
属性选择器：[];
查找条件：属性；我们可以通过属性来查找[^=][$=][*=][=][attr]
伪类选择器： ：：；
：：before；：：after；
必须指定一个content：新添加的元素是一个行内元素。
尽量使用单冒号：before ：after
2.文字阴影：text-shadow：2px 2px 5px 5px red;
3.边框：
边框圆角：border-radious：10px 10px 10px 10px；
border-radius：10px；
border-radius：10px 20px：对角线
border-radius：10px 20px 30px；
边框阴影：box-shadow：2px 2px 5px blue；
box-shadow：insert 2px 2px 5px blue;内阴影；
边框图片：border-image-source：url（）；
border-image-slice：22 22 22 22；
border-image-repeat：round stretch repeat；
border-image-width：30px；
4：盒模型
padding+content+border；
css3改变了这种计算方法：
width css设置的宽度：
当设置box-sizing：border-box；
width=盒子的大小：变小的是content区域。
计算方式为content = width – border - padding
当设置box-sizing：content-box；
width=content；
5.渐变色：
。1.方向；。2至少有两个颜色；。3.一定的距离；
linear-gradient（to right，yellow，green）；
90deg是角度；
background：linear-gradient（
90deg，
yellow 25%，
green 25%，
green 50%，
pink 50%，
pink 75%，
blue 75%，
blue 100%）；
其中的百分比是分割距离；
没有距离无法过度；
将渐变当成图片来对待；
设置背景图片大小:
当指定了背景图片尺寸时，百分比是相对于background-size；
线性渐变
径向渐变
radial-gradient（120px at center center，yellow，green）；圆
radial-gradient（120px 80px at center center，yellow，green）；椭圆
center center可用百分比，数值显示；
清除塌陷：给父元素设置overflow:hidden或者设置边框；
::before ::after
一个创建一个div 一个在前面和后面 这个前面和后面不是固定的 可以通过定位 随便定位置 。
过渡效果：transition：all 1s；
缩放：transform:scale(0.5)；
移动：transform：translate（100px，100px）；
旋转:transform:rotate(角度)；
倾斜：transform：skew（10deg垂直，10deg水平）；
动画：
animation：rotate 2s infinite linear；
1、必要元素：
a、通过@keyframes指定动画序列；
b、通过百分比将动画序列分割成多个节点；
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素；
2、关键属性
a、animation-name设置动画序列名称
b、animation-duration动画持续时间
c、animation-delay动画延时时间
d、animation-timing-function动画执行速度，linear、ease等
e、animation-play-state动画播放状态，play、paused等
f、animation-direction动画逆播，alternate等
g、animation-fill-mode动画执行完毕后状态，forwards、backwards等
h、animation-iteration-count动画执行次数，inifinate等
首先定义一个动画序列：
@keyframes rotate{
0% {
transform：rotateZ（0deg）；
}
100%{
transform：rotateZ(360deg);
}
伸缩布局：
display：flex（伸缩布局）；
两端对齐：
justify-content（主轴方向对齐）：space-between；
利用了伸缩布局；
主轴：默认水平
侧轴：默认垂直
方向：主轴：从左到右；侧轴：从上到下；
flex-direction：row（水平），column（垂直），row-reverse（水平翻转从右向左），column-reverse（垂直翻转从上到下）；
justify-content：flex-start：起点对齐
flex-end：终点对齐；
center：居中对齐
stretch：拉伸对齐
space-around：环绕对齐；
space-between：两端对齐；
flex-wrap：nowrap/wrap控制是否换行；
align-content：堆栈排列；