偽類邊框

設計一個不占位的邊框 => 偽類 :before | :after

.box:before{content:";width: height: color: left bottom: position:absolution }

.box:after{content:";width: height: color: left bottom: position:absolution }

before after分別一個邊框不占位必須絕對定位對應的box相對定位

字體圖標

導入文件，定義對應的類名，設置外聯link 後既可以用

顯隱、

opacity:透明度 0~1設置所以可以做控制動畫

而 display 只有none或者block因此不能做動畫；瞬變 兩者都必須 定位因為不影響其他盒子布局

overflow

結合絕對定位移動；通過控制hidden auto scroll 可以控制顯示內容，滾動條；可以實現 與顯隱相似效果；但是是滑動效果

類似圖的滑動控制顯示區域

陰影

box-shadow x軸 y軸 模糊度 寬度 顏色

通過五個參數進行陰影控制達到效果

1.盒子陰影是一個獨立的顯示圖層, 永遠出現在背景層之下(即使背景層透明, 也會被覆蓋遮擋)

2.盒子可以綁定多套陰影圖層

3.陰影圖層永遠相對於顯示圖層進行偏移

二維變形

transform-origin:50px 200px ;相對於盒子左上角的坐標

transition-form rotateX(0deg) translate() scale();

角度 平移 縮放

順序不同效果不同

偽類邊框，字體圖標，顯隱，overflow，陰影，二維變形