CSS3笔记！

2D/3D转换

围绕三个轴，分别为X轴，Y轴，Z轴；

transfrom（属性）

    转换

常用元素：translate     rotate     skew

　　　　 　　   平移　　　 旋转　　 倾斜

translate（50px，100px）：从左像移50像素，并从顶部移动100像素。

rotate（30deg）：元素顺时针旋转30度。

scale（）：该元素增加或减少的大小，取决于宽（X轴）和高（Y轴）的参数。

例：scale（2，4）转变为原来大小宽的2倍，和其原大小4倍的高度。X轴（水平方向）y轴垂直方向。

skew（30deg，200deg）：元素在X轴和Y轴上倾斜20度30度。

matrix（）：有6个参数，包含旋转，缩放，移动，倾斜。

CSS图片

img { border-radius: 8px; } 圆角图片；

img {border-radius：50%} 椭圆形图片；

column-count：将元素列数分为；

column-gap：40px；列于列之间相差40像素

column-rule：3px outset #ffooff；指定列之间的宽样式和颜色；

阴影

text-shadow：文本阴影   例：text-shadow：5px  5px  5px #fff； 给标题加白色阴影。

box-shadow：盒子阴影   例：box-shadow：10px 10px； 给盒子10p的x阴影。

div{box-shadow：10px 10px grey；} 给阴影添加颜色；

P{word-wrap：break-word} 允许长文本换行。