# 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：圈，幾圈。