CSS是一種在網頁設計中經常使用的語言,用于美化網頁的外觀和布局。在CSS中,我們可以使用各種屬性來設置元素的樣式。在本文中,我們將要學習如何用CSS寫陰影。
box-shadow: h-shadow v-shadow blur spread color inset;
以上就是CSS中用于創建陰影的屬性,其中每個項的含義為:
- h-shadow:陰影的水平偏移量。
- v-shadow:陰影的垂直偏移量。
- blur:陰影的模糊半徑。
- spread:陰影的尺寸(擴展或收縮陰影)。可以是正值或負值。
- color:陰影的顏色。
- inset:可選參數,表示陰影應該向元素內部擴展而不是向外部。
/* 創建一個陰影 */ .shadow { box-shadow: 5px 5px 5px #000; }
上面的CSS代碼將為class為shadow的元素創建一個陰影,陰影的顏色為黑色,大小為5px,模糊半徑為5px。
/* 創建一個內陰影 */ .inner-shadow { box-shadow: inset 5px 5px 5px #000; }
如果你需要創建一個內陰影,你可以在box-shadow屬性前加上“inset”關鍵字。
總之,用CSS創建陰影是一種簡單而有效的方式來為網頁添加一些美麗的細節。通過使用不同的參數,你可以輕松地調整陰影的大小、形狀和顏色。