CSS效果常見問題

詳細解答參見上篇博客

問題1.如何用 div 畫一個 xxx

box-shadow 無限投影 (堆疊成複雜圖案）

::before

::after

問題2.如何產生不佔空間的邊框

1.box-shadow

2.outline

問題3.如何實現圓形元素（頭像）

border-radius:50%

問題4.如何實現ios圖標的圓角

1.將設計圖形導入矢量設計軟件導成 svg

2.用 clip-path：（svg）製做圓角圖標

問題5.如何實現半圓、扇形等圖形

border-radius 組合：1.有無邊框 2.邊框粗細 3.圓角半徑

問題6.如何實現背景圖居中顯示/不重複/改變大小

background-position / background-repeat / background-size(cover/contain)

問題7.如何平移、放大一個元素(transform 跟動畫沒有關係）

transform:translateX(100px)

transform:scale(2)

問題8.如何實現3D效果

1.perspective:500px(指定透視角度大小）

2.transform-style:preserve-3d（選擇3D效果，否則是2D效果）

3.transform:translate rotate（變換）