在CSS中,使用drop-shadow可以為元素添加陰影效果。 該屬性需要四個值:水平偏移,垂直偏移,模糊半徑和陰影顏色。例如:
box-shadow: 10px 10px 5px grey;
上面的代碼將在元素的右下角投下10px的陰影,向右和向下偏移。 陰影的大小將是5px,顏色將是灰色。
使用drop-shadow,只需要使用單詞“drop-shadow”替換“box-shadow”。例如:
filter: drop-shadow(0px 0px 5px grey);
上面的代碼將為元素創建一個5px的陰影,顏色為灰色。由于drop-shadow是一個濾鏡函數,因此需要使用filter屬性。
另外,使用drop-shadow時可以添加關鍵字inset以使陰影成為內部陰影。
以下是一個完整的使用例子:
.shadow { width: 200px; height: 200px; background-color: white; border: 1px solid black; box-shadow: 10px 10px 5px grey; filter: drop-shadow(0px 0px 5px grey); }
上面的代碼會創建一個寬高為200px的元素,并分別添加box-shadow和drop-shadow陰影效果。
上一篇python畫筆速度變快
下一篇css代碼圖片鏈接