# CSS3 CSS3 完全向后兼容，因此升级到 CSS3 的代价是非常小的。 > [3CSCHOOL CSS3](http://www.w3school.com.cn/css3/css3_border.asp) ## 简介 CSS3 被划分为模块。 其中最重要的 CSS3 模块包括： - 选择器 - 框模型 - 背景和边框 - 文本效果 - 2D/3D 转换 - 动画 - 多列布局 - 用户界面 ## 边框 通过 CSS3，可以方便的创建圆角边框，向矩形添加阴影，使用图片来绘制边框。 - border-radius，创建边框圆角 - border-shadow，设置边框阴影。 例如： ```css div { box-shadow: 10px 10px 5px #888888; } ``` - border-img，使用图片创建边框。 例如： ```css div { border-image:url(border.png) 30 30 round; } ``` ## ## flex-box 布局 flex-box(FlexibleBox/CSS3弹性布局) 是 CSS3中的一种新的布局模式，是可以自动调整子元素的高和宽，来很好的填充任何不同屏幕大小的显示设备中的可用显示空间。收缩内容防止内容溢出，确保元素拥有恰当的行为的布局方式，例如：对齐方式，排列方向，排列顺序。 > [参考文章](http://www.css88.com/archives/7760) ### 基础概念 主轴（main axis），交叉轴（cross axis） 主轴起点为 main start，终点为 main end。交叉轴起点为 cross start，终点为 cross end。 > 主轴不一定水平，取决于 flex-direction 使用方法，外层容器 display 属性设置为 flex，使用 flex-direction 设置排列方向。 其他属性： 1. justify-content，可选值：flex-end，center，flex-end，space-evenly，space-between，space-around。(主轴方向)  2. align-items，可选值: start, end, center。（交叉轴） 3. align-self: 可选值：flex-start，center，flex-end。（应用于子元素，设置自身的对齐位置） 4. flex-wrap: wrap（设置 flex 可以多行排列，溢出元素即换行排列），wrap-reverse（多行排列，从末尾开始）， 5. align-content（多行排列时在交叉轴上的排列方式），可选值：flex-start，flex-end，center，space-between，space-around ，space-evenly 和 stretch（默认）。 6. flex-grow（设置容器空间剩余时不同元素拉伸占剩余空间的比例，默认为1），值为数字。 7. flex-shrink（设置需要收缩时不同元素的比例），值为数字。 8. flex-basis（设置元素初始大小，默认值为 auto），可选值为 px，百分比。 9. flex: flex-grow-value flex-shrink-value flex-basis-value ## 属性 ### transform 旋转：transform：rotate(7deg); > css中的相关度数：① deg：度数，总共360度; ② grad：梯度，一个圆400梯度； ③ rad：弧度，Π； ④ turn：圈，几圈。