每個 UI 開發人員都應該知道的聰明的 CSS 行話-魔扣目錄

簡介：簡潔 css 的力量

作為 ui 開發人員，您總是在尋找簡化代碼并創建更高效??、更引人注目的設計的方法。 css（層疊樣式表）是您的武器庫中的基本工具，掌握它可以顯著提高您的生產力和工作質量。在這篇博文中，我們將探索 15 個獨特的 css 行話，它們可以徹底改變您設計網頁的方法。

這些緊湊的 css 技巧不僅可以節省時間，而且還展示了 css 的多功能性和強大功能。無論您是經驗豐富的專業人士還是剛剛開始 ui 開發之旅，這些俏皮話都將為您的技能組合增添價值，并幫助您用更少的代碼創建更精美、響應更快的設計。

讓我們深入研究這些 css gem，看看它們如何改變您的開發過程！

1. 完美的居中技術

網頁設計中最常見的挑戰之一是水平和垂直居中元素。這是一個 css 單行代碼，可以輕松實現這一目標：

.center {
  display: grid; place-items: center;
}

登錄后復制

這個簡單而強大的 css 技巧使用 css 網格將任何子元素置于其父容器中。 display: grid 屬性創建一個網格容器，而 place-items: center 將網格項（在本例中為子元素）水平和垂直對齊在中心。

此方法適用于容器內的單個元素和多個元素。這是一個多功能的解決方案，可以讓您免于為不同場景編寫復雜的居中代碼。

2. 響應式文本大小調整變得簡單

創建響應式排版可能是一項挑戰，但是這個 css 一行代碼讓它變得輕而易舉：

body {
  font-size: calc(1rem + 0.5vw);
}

登錄后復制

對 calc() 函數的巧妙使用將基本字體大小 (1rem) 與視口寬度相關值 (0.5vw) 結合起來。隨著視口寬度的變化，字體大小也會相應調整，確保您的文本在不同的屏幕尺寸上仍然可讀。

這種方法的美妙之處在于它的簡單性和靈活性。您可以通過修改計算中的值輕松調整基礎尺寸和變化率。

3. 自定義滾動條樣式

自定義滾動條可以為您的網站設計添加獨特的風格。這是一個單行代碼，允許您在基于 webkit 的瀏覽器中設置滾動條的樣式：

::-webkit-scrollbar { width: 10px; background: #f1f1f1; border-radius: 10px; }

登錄后復制

此 css 技巧針對的是 webkit 瀏覽器（如 chrome 和 safari）中的滾動條偽元素。您可以調整寬度、背景顏色和邊框半徑以符合您的設計偏好。雖然這不適用于所有瀏覽器，但對于支持它的瀏覽器來說這是一個很好的增強。

4. 創建截斷文本效果

處理動態內容時，經常需要截斷超過一定長度的文本。這個 css 單行代碼為溢出的文本創建了省略號效果：

.truncate {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

登錄后復制

這種屬性組合確保文本保持在單行上（white-space：nowrap），隱藏任何溢出（overflow：hidden），并在截斷文本的末尾添加省略號（…）（text-溢出：省略號）。

5.整個頁面平滑滾動

實現平滑滾動可以極大地增強網站的用戶體驗。這是一個簡單的 css 單行代碼，可以實現整個頁面的平滑滾動：

html {
  scroll-behavior: smooth;
}

登錄后復制

此屬性可確保當用戶單擊頁面中的錨鏈接時，瀏覽器平滑滾動到目標部分，而不是突然跳轉。這是一個小小的改變，可以顯著提高您網站的感知質量。

6. 創建響應式正方形

創建保持縱橫比的完美方形元素可能很棘手，尤其是在響應式布局中。這是一個巧妙的 css 技巧來實現這一點：

.square {
  width: 50%; aspect-ratio: 1;
}

登錄后復制

縱橫比屬性確保元素的高度始終與其寬度相匹配，從而創建一個完美的正方形。您可以根據需要調整寬度百分比，并且元素在不同的屏幕尺寸上都會保持其正方形形狀。

7. 自定義文本選擇樣式

自定義所選文本的外觀可以為您的網站添加獨特的風格。這是一個 css 語句來實現這一點：

::selection { background: #ffb7b7; color: #000000; }

登錄后復制

這個 css 技巧允許您更改網站上所選文本的背景顏色和文本顏色。您可以調整顏色以匹配您網站的配色方案，創造有凝聚力的品牌體驗。

8. 輕松切換深色模式

為您的網站實施深色模式可以改善用戶體驗，尤其是對于夜間瀏覽的用戶。這是一個簡單的基于 css 變量的方法：

body {
  --text-color: #333; --bg-color: #fff;
}
@media (prefers-color-scheme: dark) {
  body { --text-color: #fff; --bg-color: #333; }
}

登錄后復制

這個css技巧使用css變量來定義顏色和媒體查詢來檢測用戶的配色方案偏好。然后，您可以在整個 css 中使用這些變量來輕松在淺色和深色模式之間切換。

9. 創建磨砂玻璃效果

磨砂玻璃效果，也稱為玻璃形態，在ui設計中越來越流行。這是一個 css 語句來創建這種效果：

.frosted-glass {
  backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.5);
}

登錄后復制

背景濾鏡和半透明背景顏色的組合創造了美麗的磨砂玻璃效果。您可以調整模糊量和背景不透明度以獲得所需的外觀。

10.完美的圓角

為不同尺寸的元素創建完美的圓角可能具有挑戰性。這是一個 css 技巧，可確保您的元素始終具有完美的圓角：

.round {
  border-radius: 9999px;
}

登錄后復制

通過為 border-radius 設置一個非常大的值，可以確保角始終盡可能圓，無論元素的大小如何。這對于按鈕、徽章或任何您想要一致圓角的元素特別有用。

11.簡單的 css 網格布局

使用 css grid 創建復雜的布局并不一定很復雜。這是設置響應式網格的一行：

.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

登錄后復制

這個 css 技巧創建了一個網格，其中的列會自動調整以適應可用空間。 minmax() 函數確保列的寬度至少為 200 像素，但可以增長以填充可用空間。這將使用最少的代碼創建響應式布局。

12.流體版式

使用 css 單行代碼可以創建在不同屏幕尺寸上平滑縮放的版式：

h1 {
  font-size: clamp(2rem, 5vw, 5rem);
}

登錄后復制

clamp() 函數允許您設置文本的最小尺寸 (2rem)、首選尺寸 (5vw) 和最大尺寸 (5rem)。這可確保您的排版在所有設備尺寸上保持可讀性和視覺吸引力。

13. 使用 css 創建三角形

有時您需要為 ui 元素創建簡單的形狀，例如三角形。這是一個用于創建三角形的 css 單行代碼：

.triangle {
  width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #333;
}

登錄后復制

這個 css 技巧使用邊框屬性來創建三角形。通過調整邊框寬度和顏色，您可以創建指向不同方向的三角形。

14. 全出血布局

創建一個全出血布局，其中一些元素延伸到視口的邊緣，而主要內容保持居中，可以使用以下 css 來實現：

.full-bleed {
  width: 100vw; margin-left: calc(50% - 50vw);
}

登錄后復制

這個 css 技巧計算將元素擴展到視口的整個寬度所需的負邊距，而不管父容器的寬度如何。它對于在受限布局內創建沉浸式背景部分或全角圖像特別有用。

15.動畫漸變背景

添加微妙的動畫漸變背景可以為您的設計帶來活力。這是一個 css 語句來創建這種效果：

.animated-gradient {
  background: linear-gradient(270deg, #ff7e5f, #feb47b); background-size: 400% 400%; animation: gradient 15s ease infinite;
}
@keyframes gradient { 0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%} }

This CSS trick creates a gradient background that smoothly animates between colors. You can adjust the colors, animation duration, and easing function to suit your design needs.

登錄后復制