本文來(lái)分享 12 個(gè)超級(jí)實(shí)用的CSS 技巧，幫助你充分發(fā)揮 CSS 的優(yōu)勢(shì)，優(yōu)化用戶體驗(yàn)。

user-select

user-select 屬性可以用來(lái)控制用戶是否能夠選擇文本。

<div>
   <p>You can't select this text.</p>
</div>
<p>You can select this text.</p>

CSS：

div {
  width: max-content;
  height: 40px;
  border: 3px solid purple;
  user-select: none;
}

解析：user-select 屬性用于控制用戶是否能夠選擇文本。通過(guò)設(shè)置 user-select 屬性，可以限制用戶對(duì)文本的選擇行為或禁止選擇。該屬性可以應(yīng)用于任何 HTML 元素，并接受以下值：

• auto：默認(rèn)值，表示用戶可以選擇文本。
• none：禁止用戶選擇文本。
• text：允許用戶選擇文本，但不能選擇元素的其他部分，如背景、邊框等。
• all：允許用戶選擇元素內(nèi)的所有內(nèi)容，包括文本、背景和邊框。

user-select 屬性的應(yīng)用場(chǎng)景通常涉及到用戶交互和用戶體驗(yàn)的控制，可以在以下情況下使用該屬性：

• 防止文本被選中：在某些情況下，你可能希望防止用戶選擇特定區(qū)域或元素內(nèi)的文本，例如，防止用戶選擇輸入框中的內(nèi)容或防止復(fù)制敏感信息。通過(guò)將 user-select 設(shè)置為 none，可以禁止用戶選擇這些文本，從而保護(hù)數(shù)據(jù)的安全性。
• 控制文本選擇范圍：有時(shí)你可能只希望用戶能夠選擇特定的文本內(nèi)容，而不包括其他元素中的樣式信息。通過(guò)將 user-select 設(shè)置為 text，可以限制用戶只能選擇文本內(nèi)容，而不能選擇其他元素的樣式信息，從而提供更精確的文本選擇控制。
• 自定義選擇效果：使用 user-select 屬性，你還可以自定義文本選擇的外觀效果。通過(guò)設(shè)置適當(dāng)?shù)?CSS 樣式，如更改選中文本的背景色、前景色等，可以為用戶提供獨(dú)特的文本選擇體驗(yàn)，增強(qiáng)頁(yè)面的可視化效果。
• 取消文本選擇：在某些特定情況下，你可能希望用戶無(wú)法選擇任何文本，以防止復(fù)制、截屏等操作。通過(guò)將 user-select 設(shè)置為 none，可以完全禁止用戶選擇文本，從而實(shí)現(xiàn)取消文本選擇的效果。

pointer-events

可以使用 pointer-events 屬性來(lái)控制元素對(duì)指針事件的反應(yīng)。

<div>
   <p class="first">
      Please <a >Click here</a>
   </p>
   <p class="second">
      Please <a >Click here</a>
   </p>
</div>

CSS：

.first {
  pointer-events: none; 
}

.second {
  pointer-events: auto;
}

解析：pointer-events 屬性用于控制元素對(duì)指針事件的反應(yīng)。該屬性允許指定一個(gè)值來(lái)控制元素是否響應(yīng)鼠標(biāo)事件、觸摸事件或筆事件。它有以下值：

• auto：元素按照默認(rèn)方式響應(yīng)指針事件。
• none：元素不響應(yīng)指針事件，事件將向下傳遞到下一層元素。
• visiblePainted：元素響應(yīng)指針事件，但只有在元素的背景顏色或圖片已經(jīng)被繪制時(shí)才會(huì)響應(yīng)。
• visibleFill：元素響應(yīng)指針事件，但只有在元素的填充區(qū)域內(nèi)部時(shí)才會(huì)響應(yīng)，對(duì)于描邊無(wú)效。
• visibleStroke：元素響應(yīng)指針事件，但只有在元素的描邊區(qū)域內(nèi)部時(shí)才會(huì)響應(yīng)，對(duì)于填充無(wú)效。
• visible：元素響應(yīng)指針事件，只要它可見(jiàn)且鼠標(biāo)事件發(fā)生在元素的邊框框線上或內(nèi)部。

pointer-events 屬性的應(yīng)用場(chǎng)景如下：.

• 禁用用戶交互：通過(guò)將元素的 pointer-events 設(shè)置為 none，可以阻止用戶與該元素進(jìn)行任何交互操作，如點(diǎn)擊、滾動(dòng)等。這在需要禁用某個(gè)元素的交互能力時(shí)非常有用。
• 創(chuàng)建自定義的點(diǎn)擊區(qū)域：有時(shí)候，可能希望一個(gè)元素在視覺(jué)上占據(jù)更大的空間，但只對(duì)特定區(qū)域響應(yīng)點(diǎn)擊事件。通過(guò)將 pointer-events 設(shè)置為 none，然后在需要響應(yīng)點(diǎn)擊的子元素上重新設(shè)置為 auto，可以創(chuàng)建自定義的點(diǎn)擊區(qū)域。
• 優(yōu)化元素疊加情況下的交互：當(dāng)多個(gè)元素重疊在一起時(shí)，可能會(huì)出現(xiàn)交互沖突。通過(guò)設(shè)置不同元素的 pointer-events 屬性，可以控制哪個(gè)元素應(yīng)該優(yōu)先響應(yīng)指針事件，以解決疊加元素之間的交互問(wèn)題。
• 實(shí)現(xiàn)鼠標(biāo)樣式變化：通過(guò)設(shè)置 pointer-events 屬性，可以根據(jù)特定的交互狀態(tài)來(lái)改變鼠標(biāo)樣式。例如，在元素被禁用或不可點(diǎn)擊時(shí)，將 pointer-events 設(shè)置為 none，并將鼠標(biāo)樣式修改為指示不可點(diǎn)擊的樣式。

accent-color

當(dāng)涉及到復(fù)選框和單選按鈕等輸入時(shí)，瀏覽器通常會(huì)引入默認(rèn)顏色，該顏色可能與 UI 配色方案不太協(xié)調(diào)。

為了保持 UI 的一致性，可以使用accent-color 屬性更改輸入的默認(rèn)顏色。

<form>
   <input type="radio" id="html" />
   <label for="html">HTML</label>
   <input type="radio" id="css" />
   <label for="css">CSS</label>
   <input type="radio" id="js" />
   <label for="js">JavaScript</label>
</form>

CSS:

input {
  accent-color: green;
}

效果如下：

解析：accent-color 屬性用于指定元素的強(qiáng)調(diào)色。它可以應(yīng)用于很多元素，例如按鈕、鏈接、輸入框、選擇框等等，以突出顯示它們?cè)陧?yè)面中的作用。使用該屬性可以使你的網(wǎng)頁(yè)在不同的主題和模式下保持一致的強(qiáng)調(diào)色，從而提高網(wǎng)頁(yè)的可訪問(wèn)性和用戶體驗(yàn)。

backdrop-filter

有時(shí)候你可能想要對(duì)一個(gè)元素后面的區(qū)域應(yīng)用濾鏡效果（模糊效果），可以使用 backdrop-filter 屬性。

<div class="container">
  <div class="box">
    <p>This is an example of backdrop-filter property.</p>
  </div>
</div>

CSS：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 350px;
  width: 350px;
  background: url(img.webp) no-repeat center;
}
.box {
  padding: 10px;
  font-weight: bold;
  color: white;
  background-color: transparent;
  backdrop-filter: blur(10px);
}

效果如下：

解析：backdrop-filter 屬性用于在元素背景的后面應(yīng)用濾鏡效果。它可以讓你創(chuàng)建出模糊、色彩變化或其他視覺(jué)效果來(lái)改變?cè)乇尘皡^(qū)域的外觀。通過(guò)使用該屬性，可以為元素的背景添加一層視覺(jué)效果，使背景與頁(yè)面的其余內(nèi)容產(chǎn)生視覺(jué)上的分離和層次感。這個(gè)屬性通常與背景圖像或顏色一起使用，以提供一種更加豐富和吸引人的設(shè)計(jì)效果。

caret-color

當(dāng)使用 input 或 textarea 元素時(shí)，可以使用 caret-color 屬性來(lái)更改這些元素的文本光標(biāo)顏色，以匹配網(wǎng)頁(yè)的配色方案。

<input type="text" placeholder="Your Name" />

CSS：

input {
  caret-color: red;
}

解析：caret-color 屬性用于指定文本光標(biāo)的顏色。文本光標(biāo)是指在輸入框或文本區(qū)域中表示當(dāng)前輸入位置的閃爍符號(hào)，該屬性可以接受各種顏色值，例如十六進(jìn)制顏色、RGB 值、顏色名稱(chēng)等。它可以應(yīng)用于任何支持文本輸入和編輯的元素，如 input、textarea 等。

image-rendering

可以使用 image-rendering 屬性來(lái)控制縮放圖像的渲染方式并優(yōu)化質(zhì)量。不過(guò)，該屬性不會(huì)影響未經(jīng)縮放的圖像。

img {
  image-rendering: pixelated;
}

解析：image-rendering 屬性用于控制圖像在瀏覽器中的渲染方式。它可以影響圖像在縮放、旋轉(zhuǎn)或變形等操作時(shí)的呈現(xiàn)質(zhì)量。它提供了不同的值，可以讓你選擇最適合你需求的圖像渲染方式。以下是一些常見(jiàn)的屬性值：

• auto：瀏覽器默認(rèn)的圖像渲染方式。
• crisp-edges：通過(guò)強(qiáng)調(diào)圖像邊緣來(lái)實(shí)現(xiàn)清晰的渲染效果，適用于像素風(fēng)格的圖像。
• pixelated：通過(guò)像素化的方式來(lái)渲染圖像，適用于放大圖像時(shí)保持像素風(fēng)格的效果。

以下是 image-rendering 屬性的一些常見(jiàn)應(yīng)用場(chǎng)景：

• 改善小圖片的清晰度：對(duì)于小圖片，如果直接展示可能會(huì)出現(xiàn)鋸齒或者模糊的問(wèn)題。通過(guò)將 image-rendering 設(shè)置為 pixelated，可以讓瀏覽器在縮放圖片時(shí)使用像素化的方式，從而獲得更加清晰的效果。這在需要展示小圖標(biāo)、小徽標(biāo)等場(chǎng)景下非常有用。
• 提高大圖片的加載速度：對(duì)于大圖片，如果直接展示會(huì)導(dǎo)致頁(yè)面加載速度變慢，影響用戶體驗(yàn)。通過(guò)將 image-rendering 設(shè)置為 crisp-edges，可以讓瀏覽器在縮放圖片時(shí)只顯示原始邊緣，從而加快圖片加載速度。
• 在高分辨率設(shè)備上顯示高清圖像：對(duì)于高分辨率設(shè)備，如果直接展示低分辨率的圖片，可能會(huì)出現(xiàn)模糊或者失真的問(wèn)題。通過(guò)將 image-rendering 設(shè)置為 auto 或者 high-quality，可以讓瀏覽器在高分辨率設(shè)備上顯示高清的圖像，提高用戶體驗(yàn)。
• 優(yōu)化動(dòng)畫(huà)效果的展示：當(dāng)圖像用于動(dòng)畫(huà)場(chǎng)景時(shí)，通過(guò)將 image-rendering 設(shè)置為 optimizeQuality 或者 optimizeSpeed，可以根據(jù)需要平衡圖像質(zhì)量和展示速度，從而優(yōu)化動(dòng)畫(huà)效果的展示。

mix-blend-mode

如果想要設(shè)置一個(gè)元素內(nèi)容與其背景的混合效果，可以使用 mix-blend-mode 屬性。

<div>
  <img src="cat.jpg" alt="cat" />
</div>

div {
  width: 600px;
  height: 400px;
  background-color: rgb(255, 187, 0);
}
img {
  width: 300px;
  height: 300px;
  mix-blend-mode: luminosity;
}

效果如下：

解析：mix-blend-mode 屬性用于控制元素內(nèi)容與其背景之間的混合模式。通過(guò)設(shè)置 mix-blend-mode 可以改變?cè)卦谝曈X(jué)上與其周?chē)氐慕换シ绞?。這個(gè)屬性可以應(yīng)用于任何具有背景的元素，包括文本、圖像和其他 HTML 元素。使用 該屬性可以創(chuàng)造出各種獨(dú)特的視覺(jué)效果，如顏色疊加、透明度混合、文字特效等。

常用的 mix-blend-mode 值包括：

• normal：默認(rèn)值，沒(méi)有混合效果。
• multiply：將元素的顏色與背景進(jìn)行相乘。
• screen：將元素的顏色與背景進(jìn)行屏幕模式混合。
• overlay：根據(jù)元素和背景的亮度進(jìn)行混合。
• darken：選擇較暗的顏色作為最終混合結(jié)果。
• lighten：選擇較亮的顏色作為最終混合結(jié)果。
• color-dodge：通過(guò)減少對(duì)比度來(lái)混合顏色。
• color-burn：通過(guò)增加對(duì)比度來(lái)混合顏色。
• difference：計(jì)算顏色之間的差異。
• exclusion：排除兩種顏色的共同部分。
• hue：保留元素的色調(diào)，應(yīng)用背景的飽和度和亮度。
• saturation：保留元素的飽和度，應(yīng)用背景的色調(diào)和亮度。
• color：保留元素的色調(diào)和飽和度，應(yīng)用背景的亮度。
• luminosity：保留元素的亮度，應(yīng)用背景的色調(diào)和飽和度。

object-fit

可以使用 object-fit 屬性來(lái)設(shè)置圖像或視頻的大小調(diào)整行為，使其適應(yīng)其容器。

<div>
  <img src="cat.jpg" alt="cat" />
</div>

CSS：

div {
  width: 500px;
  height: 400px;
  border: 3px solid purple;
}

img {
  width: 500px;
  height: 300px;
  object-fit: cover; 
}

效果如下：

解析：object-fit 屬性用于控制替換元素（如 <img>、<video> 或 <iframe>）在其容器中的尺寸調(diào)整行為。通過(guò)設(shè)置 object-fit 屬性，可以更好地控制替換元素在容器中的尺寸調(diào)整行為，確保它們能夠正確地適應(yīng)容器并保持比例。

當(dāng)替換元素的尺寸與其容器不匹配時(shí)，瀏覽器默認(rèn)會(huì)根據(jù)一定規(guī)則調(diào)整元素的大小和比例。然而，這可能導(dǎo)致圖像或視頻失真，或者在容器中無(wú)法正確顯示。object-fit 屬性可以解決這個(gè)問(wèn)題，它有以下幾個(gè)取值：

• fill：默認(rèn)值，元素會(huì)被拉伸以填充容器，可能導(dǎo)致元素的寬高比發(fā)生變化，從而導(dǎo)致元素變形。
• contain：元素會(huì)等比例縮放，保持其原始寬高比，并使其適應(yīng)容器，不會(huì)超出容器邊界，并且會(huì)在容器內(nèi)居中顯示。
• cover：元素會(huì)等比例縮放，保持其原始寬高比，并將其放大到填充容器，可能會(huì)超出容器邊界，但不會(huì)變形，并且會(huì)在容器內(nèi)居中顯示。
• none：元素會(huì)保持其原始大小，不會(huì)進(jìn)行任何尺寸調(diào)整。
• scale-down：元素會(huì)根據(jù)容器的大小來(lái)確定是按原始大小顯示還是進(jìn)行縮小

object-position

object-position 屬性與 object-fit 屬性一起使用，用于指定圖像或視頻在其內(nèi)容框內(nèi)的 x/y 坐標(biāo)上的位置。

<div>
  <img src="cat.jpg" alt="cat" />
</div>

CSS：

div {
  width: 500px;
  height: 400px;
  border: 3px solid purple;
}

img {
  width: 500px;
  height: 300px;
  object-fit: cover;
  object-position: bottom right;
}

效果如下：

這里設(shè)置了 object-position: bottom right; 這意味著在調(diào)整圖像大小時(shí)，它將顯示圖像的右下角部分。

解析：object-position 屬性用于指定替換元素（如 <img>、<video> 或 <iframe>）在其容器中的位置。它可以與 object-fit 屬性一起使用，以控制替換元素的大小和位置。

當(dāng)使用 object-fit 屬性調(diào)整替換元素的大小時(shí)，可能會(huì)在容器中留下空白區(qū)域。object-position 屬性允許我們根據(jù)需要將替換元素在容器內(nèi)進(jìn)行精確定位，以填充空白區(qū)域。

object-position 屬性接受兩個(gè)值：

• 水平定位：使用關(guān)鍵字 left、center 或 right，或者使用百分比或長(zhǎng)度值來(lái)指定水平方向上的位置。
• 垂直定位：使用關(guān)鍵字 top、center 或 bottom，或者使用百分比或長(zhǎng)度值來(lái)指定垂直方向上的位置。

outline-offset

可以使用 outline-offset 屬性來(lái)指定描邊與元素邊框之間的間距。

<div></div>

div {
  width: 300px;
  height: 300px;
  border: 3px solid purple;
  outline: 3px solid rgb(81, 131, 148);
  outline-offset: 10px;
}

效果如下：

解析：outline-offset 屬性用于指定描邊（outline）與元素邊框之間的間距。它可以用來(lái)調(diào)整描邊的位置和外觀。默認(rèn)情況下，描邊與元素的邊框緊密相鄰，且沒(méi)有間距。但是，通過(guò)使用 outline-offset 屬性，可以在描邊和邊框之間創(chuàng)建一個(gè)間距，該屬性接受長(zhǎng)度值或百分比值。正值會(huì)將描邊向外擴(kuò)展，負(fù)值會(huì)將描邊向內(nèi)收縮。

scroll-behavior

可以使用 scroll-behavior 屬性來(lái)實(shí)現(xiàn)平滑滾動(dòng)，而無(wú)需使用任何 JavaScript，只需要一行 CSS 代碼。

html {
  scroll-behavior: smooth;
}

解析：scroll-behavior 屬性用于控制頁(yè)面滾動(dòng)的行為。通過(guò)設(shè)置該屬性的值，可以讓頁(yè)面在滾動(dòng)時(shí)呈現(xiàn)出不同的效果，該屬性支持兩個(gè)值：

• auto：默認(rèn)值，表示使用瀏覽器默認(rèn)的滾動(dòng)行為，即瞬間跳轉(zhuǎn)到目標(biāo)位置。
• smooth：?jiǎn)⒂闷交瑵L動(dòng)效果，當(dāng)用戶通過(guò)鏈接或編程方式觸發(fā)頁(yè)面內(nèi)的錨點(diǎn)跳轉(zhuǎn)或滾動(dòng)行為時(shí)，頁(yè)面將會(huì)平滑滾動(dòng)到目標(biāo)位置。

啟用平滑滾動(dòng)效果可以提升用戶體驗(yàn)，使頁(yè)面滾動(dòng)更加流暢自然。此外，平滑滾動(dòng)還有助于減少眼睛視覺(jué)的跳躍感和頭暈感，并且能夠更好地吸引用戶的注意力。

text-justify

當(dāng)將 text-align 屬性的值設(shè)置為 justify 時(shí)，可以使用 text-justify 屬性來(lái)設(shè)置文本的對(duì)齊方式。

p {
  text-align: justify;
  text-justify: inter-character;
}

解析：text-justify 屬性用于設(shè)置文本的對(duì)齊方式，當(dāng) text-align 屬性的值設(shè)置為 justify 時(shí)生效。通過(guò)設(shè)置 text-justify 屬性，可以控制文本在行內(nèi)的分布方式，以填充行內(nèi)的空白空間，從而實(shí)現(xiàn)文本的自動(dòng)調(diào)整和對(duì)齊。該屬性支持以下幾個(gè)值：

• auto：默認(rèn)值，由瀏覽器根據(jù)當(dāng)前文本內(nèi)容和容器寬度自動(dòng)選擇適合的對(duì)齊方式。
• none：取消文本的對(duì)齊方式，文本將保持左對(duì)齊或右對(duì)齊，取決于 text-align 屬性的值。
• inter-word：使文本在單詞之間進(jìn)行自動(dòng)調(diào)整，填充行內(nèi)的空白空間。
• inter-character：使文本在字符之間進(jìn)行自動(dòng)調(diào)整，填充行內(nèi)的空白空間。