重點摘要
- 01每個box-shadow參數都有其自己的滑塊加上用於像素精度調整的數值輸入。
- 02內嵌切換在投影和內陰影之間切換，用於按下或擬物化效果。
- 03顏色和不透明度分開控制，輸出rgba()以獲得可讀的CSS。
- 04預覽使用實際元素上的實際CSS屬性——您看到的正是您的樣式表呈現的內容。
為什麼使用視覺Box-Shadow生成器
CSS box-shadow最多取六個值——水平偏移、垂直偏移、模糊半徑、擴散半徑、顏色和可選內嵌關鍵詞。從記憶中輸入它們適用於簡單陰影，但對於任何更微妙的——緊密發光、深投影、軟提升層——您在重新載入時猜測直到有東西看起來對。
視覺生成器摺疊該迭代循環。移動滑塊、立即查看更改並僅在您滿意時複製。Handytool的box-shadow生成器完全在您的瀏覽器中運行，因此預覽是應用於實際元素的實際CSS屬性——工具和您的實際頁面之間沒有呈現差異。
如何設計Box陰影
- 01
調整水平和垂直偏移
正值將陰影向右和向下移動。負值將其向左和向上移動。居中陰影(0, 0)建立發光效果。
- 02
設置模糊半徑
較高的模糊值建立更軟、更擴散的陰影。零模糊生成硬、實心陰影輪廓。
- 03
調整擴散半徑
正擴散在模糊前擴大陰影。負擴散縮小它，這對緊密的元素下陰影很有用。
- 04
選擇顏色和不透明度
使用色選擇器選擇陰影色調，然後降低不透明度以獲得微妙性。輸出使用rgba()以保持值可讀。
- 05
根據需要切換內嵌
內嵌從投影切換到內陰影——用於按下按鈕、凹陷輸入和擬物化表面。
- 06
複製CSS聲明
點擊複製以獲取完整的box-shadow值並將其粘貼到您的樣式表中。
無上傳、無帳戶
生成器完全是用戶端。您的顏色選擇、數值和預覽狀態保留在您的瀏覽器中——沒有任何內容發送到服務器。沒有帳戶可建立，也沒有使用限制。
由於預覽元素使用實際CSS box-shadow屬性，輸出根據定義是準確的——沒有畫布呈現或截圖近似。您複製的像素值是瀏覽器應用的像素值。
Box-Shadow生成器常見問題
擴散值做什麼？
正擴散在模糊應用前在所有方向擴大陰影；負擴散縮小它。配對低模糊時對緊密、定義的發光很有用。
我可以添加多個box陰影嗎？
此生成器一次輸出一個陰影。要分層它們，複製值並在您的CSS中用逗號分隔多個陰影——box-shadow接受逗號分隔列表。
為什麼我的內嵌陰影不可見？
內嵌陰影在元素內繪製，因此它們需要背景顏色或可見填充才能顯示。它們不會在透明或零大小的元素上出現。
預覽是否像素準確？
是的——預覽在實際DOM元素上使用實際CSS box-shadow屬性，因此您看到的正是您的樣式表將生成的內容。
什麼是擬物化陰影？
擬物化使用兩個陰影——一個淺和一個黑暗——以相反方向偏移以讓元素看起來從平坦表面升起或按下。對於按下變體，兩個陰影通常是內嵌。