logo
回到上一頁
M

MH Tsai

Founder

7 個必學的 CSS 技巧

clip-path: 這個屬性允許您通過將元素剪切為多邊形、圓形或其他形狀來創建複雜的形狀。例子: clip-path: polygon(0 0, 100% 0, 100% 70%, 0% 100%);

gap: 這個屬性允許您在不必添加額外的邊距或填充的情況下,為網格或彈性框項目添加間隔。例子: gap: 20px;

backdrop-filter: 這個屬性向元素的背景添加模糊或其他效果,創建分層效果。例子: backdrop-filter: blur(10px);

scroll-snap: 這個功能允許您控制元素的滾動行為,將其捕捉到特定的點或部分。例子: scroll-snap-type: y mandatory;

aspect-ratio: 這個屬性允許您設置元素的寬高比,更容易創建響應式設計。例子: aspect-ratio: 16 / 9;

:is() 和 :where(): 這些新的虛擬類別允許您簡化和優化 CSS 選擇器。例子: :is(h1, h2, h3) { color: blue; }

min()、max() 和 clamp(): 這些新的 CSS 函數允許您創建更靈活、動態的佈局,特別是用於排版。例子: font-size: min(2vw, 24px);

2023 ❤️ MH Tsai