神奇的css3

css3的兼容性还不是很好，但是非常的炫酷好用，为了做到兼容，-webkit,-moz，-o,-ms

❤css3的圆角边框：border-radius：/* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 

❤css3的边框阴影：box-shadow：x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 阴影方式（阴影方式只能放在第一个和最后一个位置，默认外阴影，内阴影值为inset）

❤css3边框图片：border-image：url()（我不喜欢用，用的时候再说吧）

❤css3渐变：这个效果很炫酷，有两种渐变一个是线性一个是径向(radial)：线性渐变：linear-gradient(渐变方向 起点颜色 终点颜色)

❤css3嵌入字体：@font-face

❤css3文字阴影：text-shadow:x偏移 y偏移 模糊 颜色

❤css3布局：超厉害的多列布局

column：宽度，列数-----------------column-width：auto默认撑开父元素 column-count：auto一列

column-gap:列间距 column-span:多用于标题跨列：none（不跨）和all（跨所有列）

column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色

❤css3盒模型：

新颖的flexbox盒模型：

1、创建一个flex容器：display：flex

2、flex容器子元素的显示：默认主轴和横向，主轴默认为row(主轴可以通过flex-direction修改为column)

3、设置居中可以用(主轴为默认row)align-items和(主轴为column)justify-content

❤css3的动..动....动画

1、transform（各种变形）：①rotate(角度):旋转②skew()：扭曲 x y两个方向③scale()：缩放④translate()：位移

ps:transform-origin：变形中心，默认是原中心点

2、transition：过渡属性

transition-property:指定css属性

transition-duration:过渡的时间

transition-timing-function:指定过渡函数

transition-delay:延迟时间