」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 掌握 CSS 中的 box-shadow:快速指南

掌握 CSS 中的 box-shadow:快速指南

發佈於2024-11-08
瀏覽:240

Mastering box-shadow in CSS: A Quick Guide

CSS 中的 box-shadow 屬性是開發人員向 HTML 元素引入深度和維度的有效機制。透過將陰影合併到元素中,可以增強使用者介面的真實感和視覺吸引力。本文將深入探討 box-shadow 的基礎知識,並提供範例來幫助您掌握其應用程式。

了解基礎

box-shadow 屬性由幾個值組成,這些值定義了陰影的顯示方式。基本語法如下:

box-shadow: offset-x offset-y blur-radius spread-radius color;
  • offset-x: 此參數定義陰影的水平位移。正值將陰影向右移動,負值將其向左移動。
  • offset-y: 此參數表示陰影的垂直位移。正值使陰影向下移動,負值使陰影升高。
  • blur-radius (可選) 此設定調節陰影的柔和度。數值越高,陰影越分散。如果未指定此參數,則預設值為 0,這會產生明顯的陰影。
  • spread-radius (可選) 此參數會影響陰影的尺寸。正值會增加陰影的大小,負值會減少陰影的大小。
  • color:此屬性定義陰影的顏色。它可以是任何有效的 CSS 顏色表示形式,例如 #000、rgba(0,0,0,0.5) 或 hsl(0, 0%, 50%)。

範例:基本框陰影

讓我們來看一個應用於按鈕的框陰影的簡單範例:

button {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

在這種情況下,陰影在水平和垂直方向上偏移5px,模糊半徑為10px,並以0.3的黑色著色。不透明度。

範例:嵌入陰影

box-shadow 也支援 inset 關鍵字,它將陰影放置在元素內部,使其具有凹進效果。

div {
  box-shadow: inset 0 0 10px #000;
}

這裡,陰影被放置在div內部,產生內容被向內推入的效果。

進階提示

  • 您可以透過用逗號描述每個 box-shadow 規範來建立多個陰影。該技術可以創建複雜的分層陰影效果。
box-shadow: 2px 2px 5px #aaa, -2px -2px 5px #ccc;
  • 陰影效果經常用於產生懸停交互,增強按鈕或卡片的交互性。
button:hover {
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.4);
}

對於喜歡更直觀的方法的人,請查看 Box-Shadow CSS 產生器。該工具可讓您輕鬆製作自訂盒子陰影效果,無需編寫任何程式碼並儲存預設。

版本聲明 本文轉載於:https://dev.to/adribyme/mastering-box-shadow-in-css-a-quick-guide-5fh?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3