溫馨提示×

如何用linear-gradient模擬光影

小樊
90
2024-06-18 15:56:55
欄目: 編程語言

使用linear-gradient可以模擬光影效果，通過調(diào)整漸變的方向和顏色來實(shí)現(xiàn)不同的光影效果。以下是一個示例代碼，可以模擬出一種簡單的光影效果：

.box {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 30%);
}

在這個示例中，我們創(chuàng)建了一個寬高為200px的盒子，并使用linear-gradient來創(chuàng)建一個從左上角到右下角135度的漸變，漸變的起始顏色是半透明白色(rgba(255, 255, 255, 0.5))，結(jié)束顏色是完全透明的白色(rgba(255, 255, 255, 0))。這樣就創(chuàng)建了一個簡單的光影效果，使盒子看起來有一些立體感。

可以根據(jù)需要調(diào)整漸變的角度、起始顏色和結(jié)束顏色，以實(shí)現(xiàn)不同的光影效果。

0 踩