CSS3 的东西很多，而且大多数都是些细枝末节，不知道什么时候会用到，先在这里记录一下不常用的一些属性样式，反复熟练的使用，自然就印象深刻了

多列

column-count：num规定元素应该被分隔的列数，后面是一个数字column-fill：auto/balance规定如何填充列column-gap： 像素值规定列之间的间隔column-rule：1px solid red规定列之间的样式column-span：all规定元素横跨的列数column-width：像素值在不知道多少列的情况下，使用width更加灵活复制代码

应用：瀑布流

盒阴影

box-shadow: 水平方向的偏移量  垂直方向的偏移量  模糊程度  扩展程度  颜色  是否具有内阴影如果设置多个阴影，各项参数使用逗号分开inset(默认没有，也就是默认是外阴影)加上inset,由元素本身的位置先里挤效果复制代码

应用：立体球，模糊盒子阴影

背景

background-cilp  指定背景的绘制区域 border-box/padding-box/content-box默认值是 border-boxbcakground-origin: 设定背景图像的原始起始位置background-origin：border-box / padding-box / content-box默认是是 paddding-boxbackground-position:定义背景图片的位置，水平与垂直方向上面的偏移量（参考点与这三个有关系）background-size：指定背景图像的大小background-size： 宽度  高度（如果只写一个数值，第二个数值默认auto）百分比： 0% - 100% 之间的任何值，此时的百分比参照于元素div的大小cover：将背景图片以容器最远边进行缩放，如果高度达到一定比例100%，宽度多出的会溢出contain：将背景图片以容器最近边进行缩放，如果高度达到一定比例100%，宽度部分就会出现空白background-image：CSS3允许您为元素使用多个背景图片background-image: url('1.jpg),url('2.jpg') ...  使用逗号把图片分开复制代码

渐变

渐变就是背景图的样式的一种呈现，说白了原理离不开背景图。

background-image: linear-gradient(方向，开始颜色，结束颜色)background: linear-gradient(red,blue)  默认从上到下background: linear-gradient(to right,red,blue)background: linear-gradient(to right bottom,red,blue)复制代码

过渡

允许 CSS 的属性值在一定的时间内平滑的过渡，在鼠标点击或者滑过元素触发，并圆滑地以动画的形式改变 CSS 的值。

变换

inline 元素不支持 2d 变换和 3d 变换

旋转transform: rotate(0deg)平移：根据 X 轴和 Y 轴 的位置给定参数，使元素发生变化transform：translate(X, Y)缩放transform: scale(x, y)  没有单位扭曲transform：skew(x, y)   单位是 deg当 x = 90deg 时，盒子垂直于频幕变换基点rotate   几何元素的的中心scale    几何元素的中心点translate  元素本身设置变换基点transform-origin: x,y复制代码

rotate 发生旋转时，坐标轴也会发生旋转，如果rotate 写在 translate 之前，元素会以新的方向位移。

scale 写在 translate 之前， translate 的值也会进行缩放。