多列布局
列数、列宽
columns:3 5em; 执行最少列数（复合）
column-count:3; 列数
column-width:5em; 列宽
设置列之间缝隙
column-gap:3em;设置列之间的缝隙存在兼容问题
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em; 通常这样写
缝隙分割线样式
column-rule:1px solid blue; （复合形式）
column-rule-width:1xp; 宽
column-rule-style:dashed; 样式
column-rule-color:red; 颜色
box-shadow
盒子阴影
box-shadow:水平位移 垂直位移 模糊程度 颜色;
box-shadow:insert 5px 5px 5px red; insert 可以设置内阴影
box-shadow:-5px -5px 5px red,5px 5px 5px blue; 可以写多个值 中间用逗号分隔
back-ground
背景图片 background-img
背景图无法撑起元素的高度
background-size:contain;图片完全放入到元素中，但是图片的长宽比可能会产生留白风险
background-size:cover; 图片完全填充到元素中，可能有部分图超出元素看不到。
background-size:300px 300px;可以单独设置宽高，可能会使图片比例失调
设置背景图原点位置与裁剪
background-origin:设置背景图原点的位置
border-box 从border左上角开始
padding-box 从padding左上角开始
content-box 从content左上角开始
background-clip:对背景图进行裁剪，超出的部分不要
border-box 从border左上角开始
padding-box 从padding左上角开始
content-box 从content左上角开始
背景渐变
background:linear-gradient(red,blue) 线性渐变
linear-gradient(to right,red,blue) to right 表示方向 也可改为90deg
linear-gradient(90deg,red 20%,blue 20%) 线性分层渐变
background:radial-gradient(red,blue) 径向渐变
background:radial-gradient(at 0 0,red,blue) at 可以设置圆心位置 如果直接写两个数字px，则代表横轴渐变和纵轴渐变的大小
如果容器不是正方形 则以椭圆的方式进行渐变 可以设置circle属性进行圆形渐变
background:radial-gradient(circle,red,blue)
transform
transform:代表标签的形变
translate 位移 translateX translateY translateZ
rotate 旋转 通常围绕Z轴 deg
scale 缩放 默认值是1
skew 倾斜 deg
示例：
transform: translate(100px, 100px);
transform: rotate(180deg);
transform: scale(0.5);
transform: skewY(45deg);
transform-origin 形变参考点 主要针对旋转使用
animation
animation-name:动画名称
animation-duration:动画时间
animation-iteration-count:动画次数 infinite（无限）
animation-delay:动画延迟
animation-direction:是否返程 alternate-reverse;
animation-timing-function:linear 速度曲线
animation-play-state:paused/running 播放与暂停
animation-fill-mode:forwards动画结束时应用最后一帧的属性
backwards延迟时应用第一帧属性
标签（空格分隔）： 未分类
在此输入正文
