Css3Three

counter-increment:num

css中的自增函数，他会设置的属性值是1开始 依次根据匹配的元素个数数值递增当你使用的时候直接使用counter（num）即可拿到当前递增的值

关键帧动画

@keyframes move {
            0%{
                  transform : rotate(0deg)
          }
            100%{                 transform:rotate(360deg)
          }
}

text-shadow

第一个参数是x位置 第二个是y轴位置 第三个是模糊值 第4个是颜色

盒子模糊

box-shadow
四个参数
第一个参数是x轴 只是把盒子变大不会复制内容
第二个参数是y轴 偏移
第三个参数是阴影模糊值
第四个是阴影外延值
transition
设置内阴影在值的前面加一个inset

背景图原点

背景图原点指的是 背景图定位的时候 0 0（坐标轴的原点）所默认的位置。
如果图篇平铺，那么border-box区域都是图片所显示的位置
background-origin：改变背景图片原点的位置
border-box
padding-box
content-box

背景图裁剪

背景图默认不裁剪，如果我们图片充满整个容器无论是大图还是小图片平铺，那么 我们的图片的显示区域就是border-box
background-clip 背景图裁剪 可以规定哪个区域可以显示背景图

背景图大小

背景图大小设置必须写在背景图 引入的下边。
百分比相对于容器的宽和高
图片对比缩放，当宽高的其中一个刚好充满容器另一边充满或超出容器，缺点图片有可能超出容器，但是图片一定充满整个容器
background-sizi：cover等比咧缩放到完成覆盖容器，背景图像有可能超出容器
length：长度值--第一个值设置宽度，第二个值设置高度
percentage：百分比---第一个值设置宽度，第二值设置高度
contain：将背景图等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内
图片比列保持不变，等比缩放，当任意宽高充满宽高，立即停止图片全部显示，但是可能充不满整个容器

多重背景写在最前边的，层级就是在最上边的

background-image

图片滤镜

filter：bulr（px）模糊
brightness（%） 亮度
contrast（%）对比度
opacity（%）透明度
saturate（%）饱和度

分栏布局

column-count
规定元素应该被分隔的列数
column-gap
规定列之间的间隔
column-rule
所有column-rule-*属性的简写属性（颜色，样式，宽度）
column-span
元素应该横跨的列数
column-width
列的宽度
宽度和栏数会发生冲突，当给好宽度计算的栏数小于你设置的栏数的时候，宽度生效 否则栏数生效e