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

1、gap

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

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

網(wǎng)格布局中的 gap

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

設(shè)置網(wǎng)格布局中間隙的語法如下：

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

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

這是一個(gè)示例，設(shè)置了一個(gè)網(wǎng)格容器，行之間有20像素的間隔，列之間有10像素的間隔。

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

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

Flexbox布局中的 gap

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

設(shè)置flexbox布局中的 gap 的語法如下：

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

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

這是一個(gè)示例，設(shè)置了一個(gè)彈性容器，其中彈性項(xiàng)之間有10px的間隔:

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

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

2、font-display

網(wǎng)頁開發(fā)中經(jīng)常被忽視的一個(gè)方面是自定義字體的加載和渲染。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代碼控制字體的顯示方式，從而避免復(fù)雜的JavaScript解決方案。該屬性提供了五個(gè)可選值：

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

3、backdrop-filter

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

backdrop-filter 屬性的語法如下：

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

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

這是一個(gè)將模糊效果應(yīng)用于元素背景的示例：

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

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

4、scroll-snap

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

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

scroll-snap-type

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

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

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

<behavior> 值指定了捕捉行為，并可以設(shè)置為以下選項(xiàng)之一：

• none ：不應(yīng)用任何捕捉行為。
• mandatory ：容器會(huì)自動(dòng)吸附到最近的吸附點(diǎn)，確保在滾動(dòng)過程中始終處于吸附位置。
• proximity ：如果滾動(dòng)停止在特定的閾值內(nèi)，容器會(huì)自動(dòng)對齊到最近的對齊點(diǎn)。

<axes> 值定義了應(yīng)用捕捉行為的滾動(dòng)軸，可以設(shè)置為以下選項(xiàng)之一：

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

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

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

使用這個(gè)CSS，容器在滾動(dòng)時(shí)會(huì)自動(dòng)吸附到最近的吸附點(diǎn)，確保在兩個(gè)方向上都能獲得流暢而精確的滾動(dòng)體驗(yàn)。

scroll-snap-align

scroll-snap-align 屬性控制滾動(dòng)容器中捕捉位置的對齊方式。它決定了滾動(dòng)停止時(shí)滾動(dòng)容器與捕捉點(diǎn)的對齊方式。

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

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

<alignment> 值指定對齊行為，并可設(shè)置為以下選項(xiàng)之一：

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

這是一個(gè)將捕捉位置與滾動(dòng)容器的起始位置對齊的示例：

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

使用這個(gè)CSS，當(dāng)滾動(dòng)停止時(shí)，滾動(dòng)容器將會(huì)將捕捉位置對齊到容器的起始位置。

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

5、contain

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

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

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

這是使用 contain 屬性的一個(gè)例子：

.container {
  contain: strict;
}

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

6、conic-gradient

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

conic-gradient 函數(shù)的語法如下：

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

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

這是一個(gè)從頂部開始順時(shí)針旋轉(zhuǎn)的圓錐漸變的示例。

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

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

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

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

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

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

7、clip-path

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

clip-path 屬性的語法如下：

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

這些值具有以下含義：

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

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

8、writing-mode

writing-mode 屬性允許我們控制文本的排列方式，無論是水平還是垂直，并確定塊的進(jìn)展方向。雖然這不是一個(gè)全新的屬性，但對許多開發(fā)人員來說仍然不太熟悉。它值得探索，因?yàn)樗谖谋静季址矫嫣峁┝遂`活性，特別是在處理需要垂直或側(cè)向書寫的語言時(shí)。

writing-mode 屬性支持以下值：

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

目前只有Firefox支持最后兩個(gè)值。

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

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

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

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

9、aspect-ratio

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

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

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

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

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

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

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

總結(jié)

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

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