CSS盒影子產生器

CSS Box Shadow Generator 是 CSS Box-Shadow 屬性的視覺編輯器。 您使用滑桿調整偏移量、模糊半徑、分散半徑、顏色和不透明度，然後在預覽元素上查看結果渲染，然後複製確切的 CSS。 無需猜測像素值並重新載入頁面，而是直接塑造陰影並閱讀它產生的程式碼。

打開此 CSS 盒陰影產生器,它從卡片預設開始,兩層複製為盒陰影:0px 4px 6px -1px #0000001a、0px 2px 4px -2px #0000001a;不透明度滑桿被烘烤成六角形顏色,因此 10% 在最後變成 1a。按一下內部預設,聲明變更為盒陰影:插入 0px 2px 4px 0px #00000033;按下按鈕的外觀。新增圖層在 0px 4px 6px 0px #00000033 處附加一個陰影,最後列出並繪製在其他陰影下方。

Box-Shadow 屬性看似深。 一個聲明可以堆疊多個陰影，每個陰影都有自己的偏移、模糊、傳播、顏色，以及可選的插圖關鍵字，它在元素內部而不是外部繪製陰影。 真正的介面陰影幾乎總是使用兩層或更多層來看起來自然，這對手寫來說很乏味。 此工具為您管理圖層，並以正確的逗號分隔順序輸出一個規範有效的聲明。

一切都發生在您的瀏覽器中。 選擇預設，調整圖層，切換淺色和深色背景之間的預覽，然後複製標準屬性或也包括 -webkit- 前綴的區塊。 沒有帳戶，沒有上傳，一旦頁面載入，它就會繼續離線工作。

陰影被畫在盒子外面,不佔用任何空間,因此它們永遠不會推動鄰居,並且會被任何祖先剪掉,並隱藏溢出。傳播是最不為人所知的價值:它在模糊之前會增長或縮小陰影形狀,因此零模糊的正傳播給出了堅實的偏移輪廓,這就是邊界效果在不影響佈局的情況下被偽造的方式。 Inset 將陰影移動到元素內部,對於按壓狀態和內部發光很有用。隨著偏移和模糊的增加,分層多個陰影是建立令人信服的深度的方式,因為單一大模糊讀作霧而不是陰影。每一層都會花費渲染時間,而在滾動或動畫過程中重新繪製的陰影是低功率設備上卡紙的常見來源。