話不多說，直接進(jìn)入正題。

1. 文檔布局

僅用兩行 CSS，就可以創(chuàng)建響應(yīng)式文檔樣式布局。

.parent{
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

2. 自定義光標(biāo)

html{
  cursor:url('no.png'), auto;
}

3. 用圖像填充文本

h1{
  background-image: url('images/flower.jpg');
  background-clip: text;
  color: transparent;
  background-color: white;
}

注意：使用此技術(shù)時(shí)，請始終指定background-color，因?yàn)槿绻捎谀撤N原因圖像未加載，可以將其用作回退值。

4. 為文本添加描邊效果

使用text-stroke屬性可以使文本更清晰可見，因?yàn)闀?huì)向文本添加描邊筆觸或輪廓。

/* Apply a 5px wide crimson text stroke to h1 elements */

h1 {
  -webkit-text-stroke: 5px crimson;
  text-stroke: 5px crimson;
}

5. :paused 偽類

使用:paused選擇器在暫停狀態(tài)下設(shè)置媒體元素的樣式，與:paused類似的還有:playing。

/* 目前只支持 Safari 瀏覽器 */

video:paused {
  opacity: 0.6;
}

6. 強(qiáng)調(diào)文本

使用text-emphasis屬性將強(qiáng)調(diào)標(biāo)記應(yīng)用于文本元素。你可以指定任意字符串（包括表情符號(hào)）作為值。

h1 {
  text-emphasis: "⏰";
}

7. 首字母下沉

避免不必要的span，改用偽元素來設(shè)置內(nèi)容的樣式，同樣，與:first-letter偽元素類似的還有:first-line偽元素。

h1::first-letter{
  font-size: 2rem;
  color:#ff8A00;
}

8. 變量回退值

:root {
  --orange: orange;
  --coral: coral;
}

h1 {
  color: var(--black, crimson);
}

9. 更改書寫模式

你可以使用書寫模式屬性來指定文本在網(wǎng)站上的布局方式，垂直或水平布局。

<h1>Cakes & Bakes</h1>

h1 {
  writing-mode: sideways-lr;
}

10. 彩虹動(dòng)畫

為元素創(chuàng)建連續(xù)循環(huán)的顏色動(dòng)畫以吸引用戶的注意力。

button{
  animation: rainbow-animation 200ms linear infinite;
}

@keyframes rainbow-animation {
  to{
    filter: hue-rotate(0deg);
  }
 from{
    filter: hue-rotate(360deg);
  }
}

11. 懸?？s放

/* 定義圖片容器的高度和寬度，以及設(shè)置圖元溢出時(shí)隱藏 */
.img-container {
  height: 250px; width: 250px; overflow: hidden;
 }

/* 讓圖片填充整個(gè)容器 */

.img-container img {
  height: 100%; width: 100%; object-fit: cover;
  transition: transform 200m ease-in;
 }

 img:hover{
  transform: scale(1.2);
 }

12. 屬性選擇器

使用屬性選擇器根據(jù)屬性選擇 HTML 元素。

<a href="">HTML</a>
<a>CSS</a>
<a href="">JavaScript</a>

/* 為每個(gè)帶href的a元素設(shè)置顏色 */

a[href] {
  color: crimson;
}

13. 剪切元素

使用clip-path屬性創(chuàng)建有趣的視覺效果，例如將元素剪裁為自定義的三角形或六邊形形狀。

div {
  height: 150px;
  width: 150px;
  background-color: crimson;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

14. 檢測屬性支持

使用 CSS @support rule直接在 CSS 中檢測對 CSS 功能的支持。

@supports (accent-color: #74992e) {
/* 如果瀏覽器支持，則以下代碼可以運(yùn)行 */
  blockquote {
    color: crimson;
  }

}

15. CSS 嵌套

CSS 工作組一直在研究如何將嵌套添加到 CSS 中。通過嵌套，我們將能夠編寫更直觀、更有條理、更高效的 CSS。

<header class="header">
  <p class="text">Lorem ipsum, dolor</p>
</header>

/* 你可以在 Safari 瀏覽器中嘗試使用 CSS 嵌套*/

.header{

  background-color: salmon;

  .text{
    font-size: 18px;
  }

}

16. clamp 函數(shù)

clamp()函數(shù)可用于響應(yīng)式和流暢的排版。

/* Syntax: clamp(minimum, preferred, maximum) */
h1{
  font-size: clamp(2.25rem,6vw,4rem);
}

17. 設(shè)置可選字段的樣式

你可以使用:optional偽類設(shè)置表單字段的樣式，例如輸入框、下拉框和文本框，這些字段上沒有必要屬性。

*:optional{
  background-color: green;
}

18. 字間距屬性

使用word-spacing屬性指定兩個(gè)單詞之間的空格長度。

p {
  word-spacing: 1.245rem;
}

19. 創(chuàng)建漸變陰影

創(chuàng)建漸變陰影以提供獨(dú)特的用戶體驗(yàn)。

:root{
  --gradient: linear-gradient(to bottom right, crimson, coral);
}

div {
  height: 200px;
  width: 200px;
  background-image: var(--gradient);
  border-radius: 1rem;
  position: relative;
}

div::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gradient);
  border-radius: inherit;
  filter: blur(25px) brightness(1.5);
  transform: translateY(15%) scale(0.95);
  z-index: -1;
}

20. 更改標(biāo)題位置

使用caption-side屬性將表格標(biāo)題放在表格的指定一側(cè)。

21. 創(chuàng)建文本列

使用column屬性為文本元素制作漂亮的列布局。

p{
  column-count: 3;
  column-gap: 4.45rem;
  column-rule: 2px dotted crimson;
}

介紹完畢。那么，這 21 個(gè)有用的 CSS 技巧你學(xué)會(huì)了嗎？