CSS常用简写
文本
字体简写
font: italic bold 1em/1.5 'Courier New', Courier, monospace;
倾斜 粗细 字号/行高 字体
盒子模型
内外外边距
padding/margin一个值：上下左右
padding/margin两个值：上下 左右
padding/margin三个值：上 左右 下
padding/margin四个值： 上 下 左 右
边框轮廓线简写
border/outline: groove 30px blue;
线条样式 粗细 颜色
visibility与display区别
visibility:hidden;：隐藏元素，留位置
display:none;：隐藏元素，不留位置
背景
背景样式简写
background:red url(./33.jpg) no-repeat border-box center;
背景颜色 背景图 不重复 背景剪裁区域 背景尺寸或是否跟随滚动或背景位置
盒子阴影
box-shadow: 10px 10px 5px rgba(100, 100, 100, .5);
水平偏移,垂直偏移,模糊度,颜色
颜色可以使用currentColor来获取当前盒子的color。并且一个盒子可以有多个阴影
渐变
background: linear-gradient(30deg, red, green);
线性渐变：倾斜30°，红色到绿色
background: radial-gradient(at bottom center ,red, green);
径向渐变：红色到绿色，渐变方向为底部向中心
弹性布局
弹性盒子简写
flex-flow: column wrap-reverse;
垂直排列 反向换行
弹性元素简写
flex:1 0 10%
放大尺寸：1 缩小尺寸0 主轴基准尺寸10%
栅格布局
栅格容器简写
grid-template: repeat(3,100px)/repeat(3,100px);
绘制3行 3列的栅格容器
栅格容器间距简写
gap:10px;
栅格容器中区域间距均为10px
栅格元素区域简写
grid-area: 2/1/span 1/span 3;
行线开始/列线开始/行线结束/列线结束
对齐方式简写
place-content
用于控制栅格中所有区域的对齐方式，语法如下：
place-content: <align-content> <justify-content>
place-items
控制所有区域中所有元素的对齐方式，语法结构如下：
place-items: <align-items> <justify-items>
place-self
控制区域中单个元素的对齐方式，语法结构如下：
place-self: <align-self> <justify-self>
变形动画
移动简写
transform: translate(100px,100px);
X轴平移 Y轴平移
transform: translate3d(50%, 50%, 100px);
由于Z轴可以无限远，所以不能用百分比
X轴平移 Y轴平移 Z轴平移
缩放简写
transform: scale(.5,2);
X轴缩放 Y轴缩放
transform: scale3d(.5,.5,.5);
X轴缩放 Y轴缩放 Z轴缩放
旋转简写
transform: rotate(90deg);
X/Y轴平面旋转（就是中心点）
transform: rotate3d(1,1,1,180deg);
向量：X/Y/Z都转180°
倾斜简写
transform: skew(60deg, 60deg);
X/Y轴倾斜60°
过渡时间简写
transition: border-radius linear 2s 0s,
background 2s 2s,
width linear 2s 4s,
height linear 2s 4s;
/* 参与过渡的动画 贝塞尔曲线 过渡时间 延迟时间 */
帧动画简写
和CSS中的其他属性一样，可以使用animation组合定义帧动画。animation 属性是一个简写属性，用于设置六个动画属性：
-
animation-name 帧动画名字
-
animation-duration 帧动画运行时间
-
animation-timing-function 帧动画速率
-
animation-delay 帧动画播放状态（暂停/运行）
-
animation-iteration-count 帧动画循环次数
-
animation-direction 延迟时间
