100+個 實用 CSS 技巧匯總合集
無論你是剛入門的新手，還是正在精進的前端工程師，這 100 個經過精選分類的 CSS 小技巧，都會幫你解決常見痛點，提升頁面性能與交互體驗。
在前端開發中，CSS 往往是最被低估的一環。但真正優秀的開發者，往往懂得如何用 CSS 寫出高效、優雅又強大的界面。
無論你是剛入門的新手，還是正在精進的前端工程師，這 100 個經過精選分類的 CSS 小技巧，都會幫你解決常見痛點，提升頁面性能與交互體驗。
從布局排版到動畫過渡，從表單交互到組件樣式，每一個技巧都附有簡潔示例，貼近實戰，拿來即用。讓我們一起重拾 CSS 的樂趣，寫出更有表現力的前端頁面。
一、布局技巧
1. 居中一個元素（水平 + 垂直）
.center {
display: flex;
justify-content: center;
align-items: center;
}2. 響應式寬度限制
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}3. CSS Grid 快速布局三列
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}4. Flex 快速平分布局
.flex-split {
display: flex;
}
.flex-split > div {
flex: 1;
}5. sticky 固定導航欄
nav {
position: sticky;
top: 0;
background: white;
}6. 雙欄固定 + 自適應布局
.layout {
display: grid;
grid-template-columns: 200px auto;
}7. 圣杯布局
body {
display: flex;
}
.left, .right {
width: 200px;
}
.center {
flex: 1;
}8. 內容高度占滿剩余空間
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1;
}9. 媒體查詢適配移動端
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}10. 強制換行
.break-word {
word-break: break-word;
}11. 固定寬高比例容器（如16:9）
.ratio {
position: relative;
padding-top: 56.25%; /* 16:9 */
}
.ratio > iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}12. 單行文本省略號
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}13. 多行文本省略號
.multi-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}14. 子元素自動換行
.flex-wrap {
display: flex;
flex-wrap: wrap;
}15. 等高卡片布局
.card-group {
display: flex;
}
.card-group .card {
flex: 1;
display: flex;
flex-direction: column;
}16. 垂直居中（非 Flex）
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}17. 布局自適應縮放字體大小
html {
font-size: clamp(14px, 2vw, 18px);
}18. flex 實現等間距分布
.space-between {
display: flex;
justify-content: space-between;
}19. 內容自適應圖片
img {
max-width: 100%;
height: auto;
}20. Grid 網格自動填充列
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
}二、視覺樣式技巧
21. 自定義滾動條
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 4px;
}22. 純CSS漸變邊框
.border-gradient {
border: 4px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(#fff, #fff),
linear-gradient(to right, #f06, #4a90e2);
}23. 毛玻璃效果
.blur-bg {
background: rgba(255,255,255,0.3);
backdrop-filter: blur(10px);
}24. 漸變文字
.gradient-text {
background: linear-gradient(to right, #f06, #4a90e2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}25. 圖片變灰濾鏡
img.gray {
filter: grayscale(100%);
}26. 自定義光標
.custom-cursor {
cursor: url(cursor.png), auto;
}27. 圖標 hover 動畫
.icon:hover {
transform: scale(1.2);
transition: transform 0.2s ease-in;
}28. 半透明遮罩層
.overlay {
background-color: rgba(0, 0, 0, 0.5);
}29. 設置圖片圓角頭像
.avatar {
border-radius: 50%;
}30. 投影增強立體感
.shadow-box {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}31.自定義文本選擇顏色
::selection {
background: #ffb7b7;
color: #000;
}32.跳動心形動畫
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.heart {
animation: pulse 1s infinite;
}33.帶陰影邊框文字
.text-shadow {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}34.虛線邊框動畫
.dashed-animate {
border: 2px dashed #000;
animation: dashmove 4s linear infinite;
}
@keyframes dashmove {
to {
background-position: 100% 0;
}
}35. hover 變暗按鈕
button:hover {
filter: brightness(90%);
}36. 高亮當前導航鏈接
nav a.active {
color: #f00;
font-weight: bold;
}37. 使用 CSS clip-path 制作形狀
.clip-circle {
clip-path: circle(50%);
}38. 霓虹燈文字效果
.neon {
color: #fff;
text-shadow: 0 0 5px #0ff, 0 0 10px #0ff;
}39. 動態加載效果
.loading {
background: linear-gradient(90deg, #eee, #ccc, #eee);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
100% { background-position: -200% 0; }
}40. 設置文字描邊
.stroke-text {
color: white;
-webkit-text-stroke: 1px black;
}三、表單與交互技巧
41. 自定義復選框樣式
input[type="checkbox"] {
accent-color: #f06;
}42. placeholder 字體顏色
input::placeholder {
color: #999;
}43. 輸入框獲得焦點樣式
input:focus {
outline: none;
border-color: #4a90e2;
box-shadow: 0 0 5px rgba(74,144,226,0.5);
}44. 禁止輸入框縮放（移動端）
input, textarea {
font-size: 16px;
}45. 表單驗證成功樣式
input:valid {
border-color: green;
}46. 表單驗證失敗樣式
input:invalid {
border-color: red;
}47. 僅樣式第一個或最后一個輸入框
input:first-of-type {
border-top-left-radius: 8px;
}
input:last-of-type {
border-bottom-left-radius: 8px;
}48. 按鈕禁用狀態樣式
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}49. 設置全局按鈕樣式
button {
padding: 10px 20px;
border: none;
background: #4a90e2;
color: #fff;
border-radius: 5px;
cursor: pointer;
}50. 自定義 radio 樣式（基礎）
input[type="radio"] {
accent-color: #ff5722;
}51. 禁止輸入框拖動文本（移動端）
input {
-webkit-user-select: none;
user-select: none;
}52. 提交按鈕 hover 效果
button:hover {
background: #357ab7;
}53. 透明背景輸入框
input {
background: transparent;
border: 1px solid #ccc;
}54. 用 label 美化上傳按鈕
<label for="file">上傳文件</label>
<input type="file" id="file" hidden>55. 鼠標懸停切換 input 邊框色
input:hover {
border-color: #4caf50;
}56. checkbox 開關按鈕樣式（切換器）
.toggle input:checked + span {
background: #4caf50;
}57. input 自動填充樣式（兼容 Chrome）
input:-webkit-autofill {
background-color: #e0f7fa !important;
}58. 自定義 select 下拉樣式（簡潔版）
select {
appearance: none;
background: url('arrow-down.svg') no-repeat right;
padding-right: 20px;
}59. 限制只能輸入數字
input[type="number"] {
-moz-appearance: textfield;
}60. 表單輸入框光標顏色
input {
caret-color: #ff4081;
}四、性能與響應式技巧
61. 設置圖像懶加載
<img src="image.jpg" loading="lazy">62. 使用 will-change 提前渲染動畫元素
.box {
will-change: transform;
}63. 減少重繪：統一觸發動畫屬性
.fast {
transform: translateY(10px);
opacity: 0.8;
transition: all 0.3s ease;
}64. 使用 contain 限制重排范圍
.card {
contain: layout paint;
}65. 優化字體渲染
body {
-webkit-font-smoothing: antialiased;
}66. 禁止圖片拖拽
img {
user-drag: none;
}67. 限制圖片最大寬度防止溢出
img {
max-width: 100%;
height: auto;
}68. 提高點擊響應速度
a, button {
touch-action: manipulation;
}69. 媒體查詢：切換淺色/深色主題
@media (prefers-color-scheme: dark) {
body {
background: #222;
color: #fff;
}
}70. 字體大小根據屏幕縮放
body {
font-size: clamp(14px, 1.5vw, 18px);
}71. 使用 aspect-ratio 設置圖片比例
img {
aspect-ratio: 16 / 9;
width: 100%;
}72. 自適應彈性網格
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}73. 只在需要時開啟動畫
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}74. 防止 iOS 字體放大
html {
-webkit-text-size-adjust: 100%;
}75. 設置固定視口單位避免移動端跳動
:root {
--vh: 100vh;
}76. 移動端一鍵適配縮放
<meta name="viewport" content="width=device-width, initial-scale=1">77. 適配 Retina 屏圖片
@media (-webkit-min-device-pixel-ratio: 2) {
.logo {
background-image: url("logo@2x.png");
}
}78. 控制響應式卡片寬度
.card {
max-width: 400px;
margin: auto;
}79. 媒體查詢響應式字體
@media (max-width: 600px) {
h1 {
font-size: 1.5rem;
}
}80. 使用 object-fit 填充圖像
img.cover {
width: 100%;
height: 200px;
object-fit: cover;
}五、動畫與過渡技巧
81. 漸變背景無限動畫
@keyframes gradientMove {
0% { background-position: 0 0; }
100% { background-position: 100% 0; }
}
.bg-animate {
background: linear-gradient(270deg, #f06, #4a90e2);
background-size: 200% 100%;
animation: gradientMove 5s infinite linear;
}82. 按鈕點擊波紋動畫
button {
position: relative;
overflow: hidden;
}
button::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
animation: ripple 0.6s ease-out;
}
@keyframes ripple {
from { opacity: 1; transform: scale(0); }
to { opacity: 0; transform: scale(2); }
}83. 頁面加載過渡動畫
.fade-in {
opacity: 0;
animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
to { opacity: 1; }
}84. 懸浮卡片彈起
.card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}85.自定義 loading 圓圈
.loader {
border: 4px solid #eee;
border-top: 4px solid #4a90e2;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}86. 漸隱漸現切換內容
.fade {
transition: opacity 0.5s ease-in-out;
}
.fade.hidden {
opacity: 0;
}87. 抖動動畫（錯誤提示）
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.shake {
animation: shake 0.3s;
}88. 按鈕點擊縮放動畫
button:active {
transform: scale(0.95);
}89. 文字打字機效果
.typing {
overflow: hidden;
white-space: nowrap;
animation: typing 3s steps(30) forwards;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}90. 滾動條平滑滾動
html {
scroll-behavior: smooth;
}六、實用小組件技巧
91. 標簽頁切換（純 CSS）
<input type="radio" name="tab" id="tab1" checked>
<input type="radio" name="tab" id="tab2">
<div class="tabs">
<label for="tab1">標簽1</label>
<label for="tab2">標簽2</label>
</div>
<div class="content">
<div class="tab1-content">內容1</div>
<div class="tab2-content">內容2</div>
</div>#tab1:checked ~ .content .tab1-content { display: block; }
#tab2:checked ~ .content .tab2-content { display: block; }
.tab1-content, .tab2-content { display: none; }92. 純 CSS 手風琴菜單
<input type="checkbox" id="accordion1">
<label for="accordion1">展開內容</label>
<div class="panel">這里是內容</div>#accordion1:not(:checked) ~ .panel {
display: none;
}93. CSS 打勾動畫
.checkmark {
width: 30px;
height: 30px;
border: 2px solid #4caf50;
transform: rotate(45deg);
border-left: none;
border-top: none;
animation: check 0.3s ease forwards;
}
@keyframes check {
0% { width: 0; height: 0; }
100% { width: 30px; height: 30px; }
}94. 進度條動畫
.progress {
width: 100%;
background: #eee;
}
.progress-bar {
height: 10px;
width: 0%;
background: #4a90e2;
animation: fill 2s forwards;
}
@keyframes fill {
to { width: 80%; }
}95. 模態彈窗樣式（配合 JS 控制）
.modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background: white;
padding: 2rem;
border-radius: 10px;
}96. 純 CSS 彈出提示 Tooltip
<button class="tooltip" data-title="提示內容">懸停我</button>.tooltip {
position: relative;
}
.tooltip::after {
content: attr(data-title);
position: absolute;
bottom: 100%;
background: #333;
color: white;
font-size: 12px;
padding: 5px;
white-space: nowrap;
border-radius: 5px;
opacity: 0;
transform: translateY(10px);
transition: 0.3s;
}
.tooltip:hover::after {
opacity: 1;
transform: translateY(0);
}97. 純 CSS 標簽/徽章（Badge）
.badge {
background: red;
color: white;
padding: 2px 6px;
border-radius: 999px;
font-size: 12px;
}98. 折疊菜單（側邊欄）
.sidebar {
width: 0;
overflow: hidden;
transition: width 0.3s;
}
.sidebar.open {
width: 200px;
}99. 響應式卡片 hover 信息浮現
.card {
position: relative;
overflow: hidden;
}
.card-info {
position: absolute;
bottom: -100%;
background: rgba(0,0,0,0.7);
color: white;
width: 100%;
padding: 1rem;
transition: bottom 0.3s;
}
.card:hover .card-info {
bottom: 0;
}100. 星級評分組件（偽元素）
.rating {
display: flex;
}
.rating::before {
content: '★★★★★';
letter-spacing: 3px;
background: linear-gradient(90deg, gold 60%, #ccc 0%);
-webkit-background-clip: text;
color: transparent;
}101.CSS 圖片放大鏡效果
.zoom {
overflow: hidden;
}
.zoom img {
transition: 0.3s;
}
.zoom:hover img {
transform: scale(1.2);
}102.CSS 時間軸
.timeline {
position: relative;
border-left: 2px solid #4a90e2;
padding-left: 20px;
}
.timeline-item {
margin-bottom: 20px;
position: relative;
}
.timeline-item::before {
content: '';
position: absolute;
left: -9px;
top: 0;
width: 10px;
height: 10px;
background: #4a90e2;
border-radius: 50%;
}103.輸入框帶搜索圖標
.search {
background: url(search-icon.svg) no-repeat 10px center;
padding-left: 30px;
}104.CSS 骨架屏（Skeleton）
.skeleton {
background: linear-gradient(90deg, #eee, #ddd, #eee);
background-size: 200% 100%;
animation: skeleton 1.2s infinite;
}
@keyframes skeleton {
100% { background-position: -200% 0; }
}105.CSS 數字翻牌效果（純動畫）
@keyframes flipIn {
0% { transform: rotateX(-90deg); opacity: 0; }
100% { transform: rotateX(0); opacity: 1; }
}
.flip-number {
animation: flipIn 0.5s ease;
}106.卡片陰影層級提升
.card {
transition: box-shadow 0.3s;
}
.card:hover {
box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}107.圖標徽章位置（右上角）
.icon-wrapper {
position: relative;
}
.badge {
position: absolute;
top: 0;
right: 0;
background: red;
color: white;
font-size: 10px;
border-radius: 50%;
padding: 2px 6px;
}108.拖拽指示樣式
.draggable {
cursor: grab;
}
.draggable:active {
cursor: grabbing;
}109.CSS 時間倒計時樣式（需 JS 邏輯）
.countdown {
font-family: monospace;
font-size: 2rem;
background: #000;
color: #0f0;
padding: 10px;
}110.滾動提示箭頭動畫
.scroll-down::after {
content: '↓';
display: block;
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(10px); }
}寫在最后
以上，就是我今天整理的自實際開發中的 100+ 個高頻 CSS 技巧。如果你覺得實用，建議收藏并多加練習，逐步內化為自己的前端“肌肉記憶”。你也可以將這份技巧清單應用到項目優化、組件封裝和樣式規范中，減少冗余代碼，提升 UI 品質。
如果你希望將這些技巧拓展為完整的 UI 組件庫或樣式手冊，也歡迎繼續探索，我們可以一起打磨一套專屬于你的 CSS 工具箱。
讓 CSS，不止于樣式，更成為你的前端核心競爭力。最后，感謝你的閱讀，祝編程愉快！
責任編輯：龐桂玉
來源：
web前端開發
