在Web開發中,CSS樣式陰影特效是增強網站設計美感的重要元素之一。下面將分享幾種常見的CSS陰影特效。
/*1. 模糊陰影*/ .shadow { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /*2. 內陰影*/ .shadow-inset { box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); } /*3. 外陰影*/ .shadow-outset { box-shadow: outset 0 2px 4px rgba(0, 0, 0, 0.2); } /*4. 多重陰影*/ .shadow-multiple { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 0 4px rgba(0, 0, 0, 0.2); }
上述代碼中,box-shadow屬性指定了陰影的樣式和設置。其中,第一個參數指定水平偏移量,第二個參數指定垂直偏移量,第三個參數指定陰影半徑,第四個參數指定陰影顏色和透明度。
通過調整這些參數,可以實現不同的陰影特效。例如,將第四個參數的透明度設置為0.5,可以讓陰影半透明。另外,還可以通過添加多個顏色和半徑不同的陰影效果,創建出更加復雜的效果。
上一篇css樣式設置按鈕邊界
下一篇css樣式透明圖片