CSS3是一種用于網頁設計的樣式表語言,是CSS的升級版。它可以實現更多的效果和交互特性。今天我們要介紹的是CSS3中的變寬陰影。
/* 定義基礎樣式 */ .shadow { background-color: #FFF; padding: 20px; box-shadow: 0 0 10px #888; border-radius: 10px; margin: 20px; width: 200px; height: 200px; } /* 添加變寬陰影 */ .shadow:hover { box-shadow: 0 0 10px #888, 0 0 20px #888, 0 0 30px #888, 0 0 40px #888; }
如上所示,我們先定義了一個基礎樣式,它的陰影為10px的灰色。然后在其:hover狀態下,我們加入了四層陰影,分別是20px、30px、40px的灰色。這就實現了陰影變寬的效果。
通過這種方式,我們可以讓網頁元素在鼠標移上去時,顯得更加立體和有層次感。這種效果是傳統陰影所不能達到的。
總之,CSS3的變寬陰影是一種非常實用的效果。它讓網頁設計更加有趣和個性化,可以提升用戶的體驗。希望大家可以多加嘗試和實踐。