CSS3邊框

三個標簽：border-radius,box-shadow,border-image;border-radius可以設置圓角，可分別為左上，右上，左下，右下單獨設置圓角。box-shadow設置陰影，水平陰影，垂直，模糊度，顏色，使用特例：

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

設置卡片效果

。border-image設置圖片邊框，邊框大小以及圖片填充方式 repeat，round，stretch。

背景

background-image 設置背景圖片，可以設置多張，第一張在最上層顯示

background-size 背景圖片大小

background-orgin content-box，padding-box，border-box，背景圖片放置的位置

background-clip 背景的繪制區域

顏色漸變屬性

linear-gradient 線性漸變，可指定方向，默認從上到下，需設置初始顏色與結束顏色，使用rgb可以設置透明度

radial-gradient 徑向漸變，由圓心向外漸變，默認為橢圓ellipse

文本效果

text-shadow 文字陰影

text-overflow 文字超出部分處理 ，clip直接裁剪，ellipsis 超出部分加上省略號

換行： word-wrap：normal 等同於 word-break：keep-all，支持換行，但是不支持長單詞拆分換行，word-wrap：break-word，保留noraml遇到斷字點如標點，空格等情況下換行的規則，並會對超出長度的長單詞或url等截斷換行，而word-break：break-all 則不采用斷字點換行規則，只根據長途，達到對應長度自動換行

字體：@font-face font-family：自定義名字 src：字體引用文件 font-weight：字體粗細

2D/3D轉換

transform(2D)： 平移：translate（x，y） 從當前位置在x軸 y軸平移大小

　　　　　　旋轉：rotate（deg）角度旋轉

　　　　　　放縮：scale（寬倍數，高倍數）寬高放縮一定倍數

　　　　　　傾斜：skew（20deg，30deg）x傾斜20deg，y軸傾斜30deg

　　　　　　matrix（），六個參數，包括平移，旋轉，放縮，傾斜四種效果

transform(3D): tranlate3d（x，y，z），rotate3d（x，y，z，angle） scale（x，y，z）3D轉換，matrix（）內使用16個值，4x4矩陣

transform-orgin：可修改被轉換的元素位置

動畫：

transition：設置過度效果，屬性名?時間 + 時間曲線+開始時間（後兩個默認ease，0，為可選）

　　　　transition-property duration timing-function delay

@keyframes 創建關鍵動畫

需要設置初始 與 結束 的style from to 或者 0% 100%，使用百分可以設置多重效果

　　animation-name duration timing-function delay iteration-count 播放次數 direction 下一次是否逆向 play-state 是否運行或者暫停動畫

column：

column-count 分割列數 colum-gap 列之間的間隙 column-rule-style：solid 列邊框樣式 colum-rule-width 列邊框寬度 colum-rule-color 顏色 column-rule三項簡寫

box-sizing：border-box 設定後，設置的寬度或者高度，是包括pading 和border ，不僅僅指盒子content

resizing：both 用戶可調整寬高 horizontal 可調整寬度 vertical 可調整高度

彈性盒子

display：flex/inline-flex

flex-direction 設置主軸方向 row 橫向 row-reverse 橫 反向 column 豎直方向 cloumn-reverse反向

justify-content（主軸）： flex-start flex-end center space-between兩端對齊 space-around 分散對齊

align-items（次軸）： flex-start flex-end center baseline與基線對齊 stretch是否拉伸

flex-wrap：wrap 換行

align-content：定義行的對齊方式，與單個item無關　flex-start flex-end center space-between兩端對齊 space-around 分散對齊

order：可設置負數，根據內容，對item進行排序，最小排最前面

auto：設置剩余空間位置 margin：auto 剩余空間放在item四周，item劇中，margin-right：auto 剩余空間放在item右邊，item靠左顯示

flex：自動計算item所占用空間

align-self：設置單個item的對齊方式

HTML——CSS3學習