漸層

開放

5.1 線性漸層

漸層是網頁設計中的一個強大工具,可以在不使用圖像的情況下創建顏色之間的平滑過渡。CSS 提供了兩種主要類型的漸層:線性 (linear-gradient) 和放射性 (radial-gradient)。這些漸層可以用於元素背景、按鈕創建和其他視覺效果。

線性漸層 (linear-gradient)

線性漸層在一條指定的路徑(軸)上創建兩個或多個顏色之間的平滑過渡。這條路可以是水平、垂直或任何角度。

語法

background: linear-gradient( direction, color-stop1, color-stop2, ...);

  • direction: 漸層的方向。可以用度數指定(例如,90deg),或使用關鍵字(例如to rightto bottom left
  • color-stop: 顏色停靠點,定義顏色及其在漸層中的位置

用例

水平漸層:

CSS
.linear-gradient-horizontal {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red, yellow);
}
HTML
<body>
  <div class="linear-gradient-horizontal">水平漸層</div>
</body>

垂直漸層:

CSS
.linear-gradient-vertical {
  width: 200px;
  height: 200px;
  background: linear-gradient(to bottom, blue, green);
}
HTML
<body>
  <div class="linear-gradient-vertical">垂直漸層</div>
</body>

對角漸層:

CSS
.linear-gradient-diagonal {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, purple, pink);
}
HTML
<body>
  <div class="linear-gradient-diagonal">對角漸層</div>
</body>

多色漸層:

CSS
.linear-gradient-multi {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red, yellow, green, blue);
}
HTML
<body>
  <div class="linear-gradient-multi">多色漸層</div>
</body>

代碼解釋:

  • to right: 漸層從左到右
  • to bottom: 漸層從上到下
  • 45deg: 漸層以 45 度角進行
  • red, yellow, green, blue: 創造多色漸層的多個顏色停靠點

5.2 放射性漸層

radial-gradient 創建顏色之間的平滑過渡,從中心發散到圓形或橢圓的邊緣。放射性漸層可以創造出有趣的視覺效果,例如模擬三維效果。

語法:

background: radial-gradient( direction, color-stop1, color-stop2, ...);

值:

  • shape: 漸層的形狀,可以是circle(圓形)或ellipse(橢圓)(默認值)
  • size: 漸層的大小,可以是closest-sideclosest-cornerfarthest-sidefarthest-corner
  • position: 漸層中心的位置,可以是百分比、像素或使用關鍵字(例如centertopleft
  • color-stop: 顏色停靠點,定義顏色及其在漸層中的位置

用例

圓形漸層:

CSS
.radial-gradient-circle {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, red, yellow);
}
HTML
<body>
  <div class="radial-gradient-circle">圓形漸層</div>
</body>

橢圓漸層:

CSS
.radial-gradient-ellipse {
  width: 200px;
  height: 200px;
  background: radial-gradient(ellipse, blue, green);
}
HTML
<body>
  <div class="radial-gradient-ellipse">橢圓漸層</div>
</body>

中心漸層:

CSS
.radial-gradient-at-center {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at center, purple, pink);
}
HTML
<body>
  <div class="radial-gradient-at-center">中心漸層</div>
</body>

角落漸層:

CSS
.radial-gradient-at-corner {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at top left, red, blue, green);
}
HTML
<body>
  <div class="radial-gradient-at-corner">角落漸層</div>
</body>

代碼解釋:

  • circle: 創建圓形漸層
  • ellipse: 創建橢圓漸層
  • at center: 漸層從中心開始
  • at top left: 漸層從左上角開始
  • red, blue, green: 多個顏色停靠點以創建多色漸層

5.3 漸層的附加設置

重複漸層

1. 重複線性漸層 (repeating-linear-gradient)

重複線性漸層創建具有線性漸層的重複圖案。

CSS
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);

2. 重複放射性漸層 (repeating-radial-gradient)

CSS
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);

3. 透明顏色停靠點

顏色停靠點可以包含透明度,以創造更複雜的視覺效果。

CSS
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));

4. 多重漸層的使用

可以使用多重漸層來創建複雜的背景。

CSS
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
1
任務
Frontend SELF TW,  等級 18課堂 5
上鎖
線性漸層
線性漸層
1
任務
Frontend SELF TW,  等級 18課堂 5
上鎖
徑向漸變
徑向漸變
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言