CSS（級聯樣式表）是網頁設計中最受歡迎的技術之一，可讓開發人員創建視覺和響應式設計。身為 Web 開發人員，掌握 CSS 對於將您的設計願景變為現實並確保在所有裝置上提供良好的使用者體驗至關重要。以下是一些你可能不知道的 CSS 技巧：

1.新形態擬人：

Neumorphsime指軟UI設計，是擬物化與扁平化設計結合的流行設計趨勢。這種風格使用陰影和高光來創造平滑的外觀。下面是它的工作原理：

首先，我們創造一個微妙的背景：從 Neumotphsime 開始，選擇淺灰色等柔和的背景顏色，

body {
  background-color: #eee;
  display: grid;
  place-content: center;
  height: 100vh;
}

然後我們建立一個具有這些樣式的元素

.element {
  height: 100px;
  width: 100px;
  transition: all 0.2s linear;
  border-radius: 16px;
}

最後，我們在懸停時為元素添加一個盒子陰影

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1), -10px -10px 10px white;
}

所以我們得到了這個漂亮的外觀

你也可以做這個

只需在框架陰影中添加一個插圖，如下所示

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white inset;
}

2. Min() & Max() 與箝位():

這些工具使網站和應用程式更具動態性和響應性。您可以使用這些函數來控制元素大小和調整大小。並在此處創建靈活的排版如何：

min() 函數可讓您在此處設定清單中的最小值

前

.container {
  width:800px;
  max-width:90%;
}

後

.container{
  width: min(800px,90%);
}

max() 函數的工作原理與 min() 函數相同，但從列表中獲得更大的值，如下所示：

.container{
  width: max(800px,90%);
}

有時你在一個容器中設定寬度以及最小和最大寬度，還有另一個名為clamp()的函數，這是它的工作原理

前

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

後

.container {
  width: clamp(400px,50vw,800px);
}

3. :Has() 和 :Not() 選擇器：

:not() 選擇器表示與選擇器清單不符的元素

.container:not(:first-child) {
  background-color: blue;
}

如果作為參數傳遞給的任何相對選擇器匹配，則 :has() 選擇器表示一個元素

.container:has(svg) {
  padding: 20px;
}

4.文字漸層：

對於這個技巧，我們不能像這樣直接為文字顏色加上漸層

.text{
  color: linear-gradient(to right, red,blue);
}

我們做什麼

.text{
  background: linear-gradient(to right, red,blue);
  background-clip:text;
  color:transparent;
}

瞧，我們得到了這個很棒的效果

結論：

透過掌握這些 CSS 技術之一，您將把您的網頁設計技能提升到新的高度。只需對這些技術進行一些小的調整，您就可以獲得視覺上令人驚嘆的結果，並使您的設計更加美觀和用戶友好。

您可以查看更多資訊：https://designobit.com/