在CSS中,我們可以給一個框添加陰影效果。這可以幫助我們在設計網頁時,讓用戶更加關注某些元素。
box-shadow: 10px 10px 5px grey;
上面的css屬性是創建一個10像素偏移量的陰影,陰影顏色為灰色。還可以通過改變陰影的擴散、顏色和位置等屬性來實現不同的效果。
以下是一些其他的陰影效果:
/* 4 像素的模糊效果 */ box-shadow: 10px 10px 4px grey; /* 紅色的內陰影 */ box-shadow: inset 0 0 10px red; /* 20 像素的 RGB 陰影,位置呈現小幅度的變化 */ box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.4); /* 立體效果的陰影 */ box-shadow: 10px 10px black, -10px -10px white;
可以在項目開發中靈活運用不同的陰影效果,來實現更加豐富的頁面設計。