21 個好用與特殊的 CSS 技巧！

🚨🚨 本文分享的所有 tips、tricks 都是 GitHub repository【css tips tricks】的一部分 🚨🚨

技巧說明

Docs Layout

僅用兩行 CSS 建立響應式文件樣式的佈局。

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

自定義游標

查看 css tips tricks 以了解更多訊息。

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

用圖片填充文本

1
2
3
4
5
6
h1 {
  background-image: url('images/flower.jpg');
  background-clip: text;
  color: transparent;
  background-color: white;
}

注意：在使用此技術時始終指定 background-color，因為這將用作後備值，以防圖像因某種原因無法加載。

給文字加入描邊

使用 text-stroke 屬性使文本更易讀和可見，它會向文本加入筆劃或輪廓。

1
2
3
4
5
6
/* 🎨 對 h1 元素應用 5px 寬的深紅色文本描邊 */

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

暫停 Pseudo Class

使用 :paused 選擇器在暫停狀態下設置媒體元素的樣式同樣 :paused 我們也有 :playing。

目前僅 Safari 支持

1
2
3
4
5
6
7
8
/* 目前僅 Safari 支持 */
video:paused {
  opacity: 0.6;
}

video:playing {
  opacity: 1;
}

強調文字

使用 text-emphasis 屬性將強調標記應用於文本元素。您可以指定任何字串，包括表情符號作為其值。

1
2
3
h1 {
  text-emphasis: "⏰";
}

樣式首字偽元素

避免不必要的 <span>，而是使用偽元素來為您的內容設置樣式，就像 first-letter 偽元素一樣，我們也有 first-line 偽元素。

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

變數的回退值

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/* 🎨 由於未定義 var(--black)，將 h1 回退為紅色 */

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

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

改變書寫模式

您可以使用書寫模式屬性 writing-mode 來指定文本在您的網站上的佈局方式，即垂直或水平。

1
<h1>Cakes & Bakes</h1>

1
2
3
4
5
/* 💡 指定文字佈局方向為 sideways-lr  */

h1 {
  writing-mode: sideways-lr;
}

彩虹動畫

為元素建立連續循環的彩色動畫以吸引用戶注意力。

閱讀 css tips tricks 以了解何時使用 prefer-reduced-motion 媒體功能。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
button {
  animation: rainbow-animation 200ms linear infinite;
}

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

Hover 時縮放

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
/* 定義圖像容器的高度和寬度並隱藏溢出 */
.img-container {
  height: 250px;
  width: 250px;
  overflow: hidden;
 }

/* 🖼️ 使容器內的圖像填滿容器 */

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

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

屬性選擇器

使用屬性選擇器根據屬性選擇 HTML 元素。

1
2
3
<a href="">HTML</a>
<a>CSS</a>
<a href="">JavaScript</a>

1
2
3
4
5
/* 🔗 以所有具有 href 屬性的元素為目標 */

a[href] {
  color: crimson;
}

裁剪元素

使用 clip-path 屬性建立有趣的視覺效果，例如將元素剪裁成三角形或六邊形等自定義形狀。

1
2
3
4
5
6
div {
  height: 150px;
  width: 150px;
  background-color: crimson;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

檢測屬性是否支持

使用 CSS @support 規則直接在您的 CSS 中檢測對 CSS 特性的支持。查看 css tips tricks 以了解有關功能查詢的更多訊息。

1
2
3
4
5
6
@supports (accent-color: #74992e) {
  /* 如果支持該屬性，將運行的代碼 */
  blockquote {
    color: crimson;
  }
}

CSS 嵌套

CSS 一直在研究如何向 CSS 加入嵌套。通過嵌套，您將能夠編寫更直觀、更有條理和更高效的 CSS。

目前僅 Safari Technology Preview 支持

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

1
2
3
4
5
6
7
8
9
/* 🎉 您現在可以在 Safari Technology Preview 中嘗試 CSS 嵌套 */

.header {
  background-color: salmon;

  .text{
    font-size: 18px;
  }
}

箝制函數

使用 clamp() 函數實現響應式和流暢的排版。

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

樣式化可選字段

你可以使用 :optional 偽類來設置表單字段的樣式，例如 input、select 和 textarea，這些字段沒有 required 屬性。

1
2
3
4
5
/* 選擇頁面上的所有可選表單域 */

*:optional {
  background-color: green;
}

字間距屬性

使用 word-spacing 屬性指定單詞之間的空格長度。

1
2
3
p {
  word-spacing: 1.245rem;
}

建立漸變陰影

這就是如何建立漸變陰影以獲得獨特的用戶體驗。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
: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;
}

改變標題位置

使用 caption-side 屬性將表格標題（表格標題）放置在表格的指定一側。

建立文本列

使用列屬性為文本元素製作漂亮的列佈局。

1
2
3
4
5
6
7
/* 🏛️ 將 p 元素的內容分成 3 列 */

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

BONUS(一)：穿透文字效果

使用 mix-blend-mode 製作穿透文字效果。

MDN 的用法說明
 Can i use 瀏覽器支援度

1
2
3
<div class="image-container">
  <div class="text">NATURE</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
.image-container {
  background-image: url("img_nature.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}

.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

以上分享，希望對您有幫助！