AICube 開放GPT-4給大家使用以及AI工具助手，可以簡化大家生圖的的prompt。

1、gap

gap 屬性是一種方便的方式，用于指定網格或彈性盒子項之間的間距，而無需額外的邊距或填充屬性。它簡化了基于網格或彈性盒子的布局的創(chuàng)建，通過提供一種設置網格或彈性盒子項在行和列中的間隙的簡寫方式。

要理解 gap 屬性，讓我們分別看一下它在網格和彈性盒子布局中的用法。

網格布局中的 gap

在網格布局中， gap 屬性設置了網格項之間的水平和垂直間距。它允許我們通過一次聲明來控制行和列之間的間隔。

設置網格布局中間隙的語法如下：

.container {
  display: grid;
  gap: <row-gap> <column-gap>;
}

<row-gap> 和 <column-gap> 值分別表示行和列之間的間距。我們可以使用任何有效的CSS長度值或關鍵字 normal 來定義間隔。如果只指定一個值，則應用于行和列。

這是一個示例，設置了一個網格容器，行之間有20像素的間隔，列之間有10像素的間隔。

.container {
  display: grid;
  gap: 20px 10px;
}

使用這個CSS，容器內的網格項之間將有指定的行和列之間的間隙，從而創(chuàng)建出一個視覺上吸引人的布局。

Flexbox布局中的 gap

在彈性盒子布局中， gap 屬性設置了沿著主軸（通常是水平方向）的彈性項目之間的間距。它簡化了創(chuàng)建靈活且均勻間距的布局的過程。

設置flexbox布局中的 gap 的語法如下：

.container {
  display: flex;
  gap: <gap-size>;
}

<gap-size> 值表示 flex 項目之間的間距。我們可以使用任何有效的 CSS 長度值或關鍵字 normal 來定義間隔。

這是一個示例，設置了一個彈性容器，其中彈性項之間有10px的間隔:

.container {
  display: flex;
  gap: 10px;
}

使用這個CSS，容器內的flex項目之間將有一個10像素的間隔，沿著主軸創(chuàng)建一個視覺上令人愉悅且均勻分布的布局。

2、font-display

網頁開發(fā)中經常被忽視的一個方面是自定義字體的加載和渲染。font-display 屬性允許我們在字體完全加載之前或下載失敗的情況下控制可下載字體的渲染方式。

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap;
}

通過在 font-display 聲明中使用 @font-face ，可以通過簡單的CSS代碼控制字體的顯示方式，從而避免復雜的JavaScript解決方案。該屬性提供了五個可選值：

• auto ：這是默認值，它的行為就好像該屬性未被使用。瀏覽器使用自定義字體隱藏文本，直到字體加載完成后再顯示文本。
• block ：通過這個值，瀏覽器減少了在等待自定義字體加載時隱藏文本的時間，使得備用字體能夠更快地顯示出來。然而，瀏覽器會無限期地等待自定義字體，并在其可用時立即切換。
• swap ：這是最常用的值。它在自定義字體加載時立即顯示備用文本。一旦自定義字體準備就緒，它將替換備用字體。這種行為與過去使用的基于JavaScript的解決方案相一致。
• fallback ：使用這個值，當等待自定義字體時，會有一個短暫的不可見文本。如果在一定時間內（大約100毫秒）自定義字體還沒有準備好，將使用備用字體。然而，如果時間過長，剩余頁面的生命周期將使用備用字體。
• optional ：與 fallback 類似，這個值也有一個短暫的不可見文本期，然后是備用字體，如果自定義字體還沒有準備好的話。不同之處在于，使用 optional ，瀏覽器可以自由決定是否下載和使用字體。這對于非必要字體或者針對慢速連接的用戶非常有用。

3、backdrop-filter

backdrop-filter 屬性允許您對元素背后的區(qū)域應用圖形效果，通常稱為背景。通過向元素的背景添加模糊、顏色調整和其他濾鏡效果，它為創(chuàng)建視覺吸引人的設計提供了新的可能性。

backdrop-filter 屬性的語法如下：

.element {
  backdrop-filter: <filter-effects>;
}

<filter-effects> 值表示要應用于背景的特定圖形效果。您可以使用各種濾鏡函數，例如 blur() 、 brightness() 、 saturate() 等，來創(chuàng)建不同的視覺效果。

這是一個將模糊效果應用于元素背景的示例：

.element {
  backdrop-filter: blur(10px);
}

使用這個CSS，元素后面的背景將被模糊10像素，創(chuàng)造出一個視覺上吸引人的效果。

4、scroll-snap

scroll-snap 屬性旨在通過在滾動后將內容捕捉到特定位置來增強滾動體驗。它提供了一種創(chuàng)建平滑且精確的滾動行為的方式，特別適用于需要滾動瀏覽一系列項目或部分的情況。

scroll-snap 屬性有多個子屬性，用于控制滾動行為的不同方面。在這里，我們將介紹最常用的兩個子屬性：scroll-snap-type 和 scroll-snap-align 。

scroll-snap-type

scroll-snap-type 屬性設置滾動容器的對齊行為。它決定容器在滾動過程中是否應該對齊到特定位置以及對齊的方向。

scroll-snap-type 屬性的語法如下：

.container {
  scroll-snap-type: <behavior> <axes>;
}

<behavior> 值指定了捕捉行為，并可以設置為以下選項之一：

• none ：不應用任何捕捉行為。
• mandatory ：容器會自動吸附到最近的吸附點，確保在滾動過程中始終處于吸附位置。
• proximity ：如果滾動停止在特定的閾值內，容器會自動對齊到最近的對齊點。

<axes> 值定義了應用捕捉行為的滾動軸，可以設置為以下選項之一：

• none ：沒有應用于任何軸的捕捉行為。
• both ：拍撲行為應用于水平和垂直軸。
• block ：快照行為應用于塊軸（垂直滾動）。
• inline ：快照行為應用于內聯(lián)軸（水平滾動）。

這是一個示例，它將容器設置為在水平和垂直方向上捕捉到特定位置：

.container {
  scroll-snap-type: mandatory both;
}

使用這個CSS，容器在滾動時會自動吸附到最近的吸附點，確保在兩個方向上都能獲得流暢而精確的滾動體驗。

scroll-snap-align

scroll-snap-align 屬性控制滾動容器中捕捉位置的對齊方式。它決定了滾動停止時滾動容器與捕捉點的對齊方式。

scroll-snap-align 屬性的語法如下：

.element {
  scroll-snap-align: <alignment>;
}

<alignment> 值指定對齊行為，并可設置為以下選項之一：

• none ：對齊功能不適用于捕捉位置。
• start ：滾動容器將對齊捕捉位置到容器的起始位置。
• end ：滾動容器將對齊位置與容器的末尾對齊。
• center ：滾動容器將對齊位置設置為容器的中心。

這是一個將捕捉位置與滾動容器的起始位置對齊的示例：

.container {
  scroll-snap-align: start;
}

使用這個CSS，當滾動停止時，滾動容器將會將捕捉位置對齊到容器的起始位置。

scroll-snap 屬性提供了一種強大的方式來增強滾動體驗，并通過部分或項目之間的直觀導航來創(chuàng)建。

5、contain

contain 屬性是優(yōu)化網頁的有價值工具，特別是對于具有復雜布局或眾多小部件的網頁。它允許你將樣式、布局和繪制重新計算的范圍限制在DOM的特定部分，提高性能并最小化不必要的渲染工作。

使用 contain ，我們可以指示一個元素及其內容盡可能獨立于文檔樹的其他部分。通過限定瀏覽器的重新計算范圍，您可以減少計算并提高性能。這個屬性在使用Web組件和React組件時特別有用，其中包含性可以幫助隔離變化的影響。它提供了幾個取值：

• none ：這是默認值，不應用任何約束效果。
• size：啟用尺寸約束意味著元素可以在不需要檢查其子元素的情況下進行尺寸調整，從而優(yōu)化布局計算。
• layout：通過啟用布局包含性，指定了元素外部的任何內容都不能影響其內部布局，反之亦然。
• style ：此值打開樣式包含，防止可能對容器之外的元素產生影響的屬性影響它。這增強了樣式的隔離性。
• paint：啟用繪制限制可以確保容器的后代元素不會顯示在其邊界之外。這對于屏幕外或不可見的元素（如移動菜單）特別有用。
• strict ：這個值結合了除了 none （ contain: size layout style paint ）之外的所有包含形式，提供全面的包含性。
• content ：類似于 strict ，但不包括 size ，該值將除大小之外的所有其他包含值組合在一起。

這是使用 contain 屬性的一個例子：

.container {
  contain: strict;
}

需要注意的是，對于 contain 的瀏覽器支持仍然有限，并且每個瀏覽器的實現(xiàn)可能只有部分支持。

6、conic-gradient

conic-gradient 函數是CSS中的一個強大功能，它可以輕松創(chuàng)建圓形漸變。它提供了一種定義從中心點向外輻射的圓形或錐形漸變的方式，為創(chuàng)建視覺上引人注目的設計打開了新的可能性。

conic-gradient 函數的語法如下：

.element {
  background-image: conic-gradient(<angle>, <color-stop-1>, <color-stop-2>, ...);
}

<angle> 值表示漸變的起始角度，以度或弧度為單位。它定義了顏色輻射的方向。<color-stop> 值指定了漸變沿著其位置的顏色和位置。

這是一個從頂部開始順時針旋轉的圓錐漸變的示例。

.element {
  background-image: conic-gradient(0deg, red, blue, green);
}

使用這個CSS，元素將具有一個錐形漸變，從頂部開始為紅色，過渡到藍色，然后是綠色，形成一個圓形漸變圖案。

還可以使用顏色停止來定義漸變中每個顏色的特定位置。以下是一個使用顏色停止創(chuàng)建圓錐漸變的示例：

.element {
  background-image: conic-gradient(red 0%, blue 50%, green 100%);
}

在這種情況下，漸變從0%開始為紅色，過渡到50%時為藍色，最后在100%時為綠色。

通過定義多個顏色停止點并指定不同的角度， conic-gradient 函數可以實現(xiàn)更復雜的漸變圖案。嘗試不同的角度和顏色組合可以產生令人驚嘆的視覺效果。

7、clip-path

clip-path 屬性允許我們創(chuàng)建獨特的形狀并對元素應用裁剪。雖然通常與圖像一起使用，但它也可以與其他元素創(chuàng)造性地結合使用，例如段落，以僅顯示內容的一部分。通過 clip-path ，您可以隱藏元素的特定區(qū)域并創(chuàng)建視覺上引人注目的設計。

clip-path 屬性的語法如下：

.element {
  clip-path: <clip-source> | <basic-shape> | <geometry-box> | none;
}

這些值具有以下含義：

• clip-source ：一個引用內部或外部SVG <clipPath> 元素的URL。
• basic-shape ：在CSS Shapes規(guī)范中定義的基本形狀函數。
• geometry-box ：與<basic-shape>結合使用，為基本形狀提供參考框。
• none ：未應用任何剪輯。

如果你正在尋找一個互動工具來嘗試 clip-path ，不妨試試clippy，它可以讓你玩弄不同的形狀并生成相應的CSS代碼。

8、writing-mode

writing-mode 屬性允許我們控制文本的排列方式，無論是水平還是垂直，并確定塊的進展方向。雖然這不是一個全新的屬性，但對許多開發(fā)人員來說仍然不太熟悉。它值得探索，因為它在文本布局方面提供了靈活性，特別是在處理需要垂直或側向書寫的語言時。

writing-mode 屬性支持以下值：

• horizontal-tb：內容從左到右水平流動，從上到下垂直流動。下一行水平線位于上一行的下方。
• vertical-rl：內容從上到下垂直流動，從右到左水平流動。下一條垂直線位于上一條線的左側。
• vertical-lr：內容從上到下垂直流動，從左到右水平流動。下一條垂直線位于前一條線的右側。
• sideways-rl：內容從上到下垂直流動，所有字形，甚至垂直書寫的字形，都向左側傾斜。

目前只有Firefox支持最后兩個值。

需要注意的是， writing-mode 的影響在英語等語言中可能不會立即顯現(xiàn)，但在需要垂直或橫向排列的語言中，它變得更加重要。為了全面了解這個屬性，建議嘗試使用不同的語言和文本布局。

這里有一個例子來說明 writing-mode 屬性的工作原理：

.container {
  writing-mode: vertical-rl;
}

通過將 writing-mode: vertical-rl 應用于容器元素，該元素內的內容將從上到下垂直流動，并且字形將向右側設置。這個屬性在創(chuàng)建獨特和視覺上吸引人的設計時非常有用，特別是在需要垂直或側向文本的情況下。

9、aspect-ratio

aspect-ratio 屬性是CSS的一個相對較新的添加，它允許我們控制元素的寬高比。它提供了一種簡單的方法，確保元素保持特定的寬高比，無論其內容或視口的大小如何。

設置元素的寬高比在處理響應式設計或保持特定視覺比例時非常有用。例如，可能希望創(chuàng)建一個容器，始終保持16:9的寬高比，確保圖像無論其原始尺寸如何都能正確顯示。

aspect-ratio 屬性的語法很簡單：

.element {
  aspect-ratio: <width> / <height>;
}

<width> 和 <height> 值表示元素的期望寬高比?？梢允褂萌魏斡行У腃SS長度值來設置寬度和高度。寬高比可以用小數、分數或百分比表示。這是一個將容器設置為16:9寬高比的示例：

.container {
  aspect-ratio: 16 / 9;
}

通過應用這個CSS，容器將始終保持16:9的寬高比，無論其內容或視口大小如何。這在響應式設計中特別有用，其中元素需要適應不同的屏幕尺寸，同時保持其寬高比。

總結

將這些較少為人所知的CSS屬性融入到你的項目中，不僅會擴展你的知識，還會為你提供額外的工具來創(chuàng)建出色的設計并優(yōu)化性能。

記住，在使用這些屬性時，考慮瀏覽器支持和潛在的跨瀏覽器問題是至關重要的。始終使用“Can I use”等工具檢查這些屬性的兼容性，以確保在不同瀏覽器上獲得一致的體驗。