CSS曲邊陰影是CSS3的一項高級功能。它可以通過使用box-shadow屬性和border-radius屬性來為一個元素添加帶有弧度角的陰影效果。
.box { width: 200px; height: 200px; background-color: #fff; border-radius: 50%; box-shadow: 0 0 10px #999999; }
以上代碼將給一個200px寬,200px高的元素添加圓形邊框和帶有10px模糊的陰影效果。
如果要使用曲邊陰影,可以添加多組box-shadow和border-radius值:
.box { width: 200px; height: 200px; background-color: #fff; border-radius: 50%; box-shadow: 0 5px 5px rgba(0,0,0,0.2), 0 0px 20px rgba(0,0,0,0.1), 0 15px 15px rgba(0,0,0,0.15), 0 -5px 5px rgba(0,0,0,0.2); }
這段代碼將同時添加四組陰影,每組陰影帶有不同的顏色、位置和模糊度。這也是曲邊陰影常用的處理方式。
總的來說,使用曲邊陰影可以讓頁面呈現出更加真實的效果,給用戶帶來更好的視覺體驗。