CSS3內側陰影是CSS3中一項比較新穎的功能,它可以為元素添加一個內部投影漸變效果,讓元素看起來有立體的感覺。使用CSS3內側陰影可以為網頁添加更加豐富多彩的效果,讓網頁更加生動。
元素 { box-shadow: inset X軸偏移量 Y軸偏移量 模糊距離 陰影大小 陰影顏色; }
其中,inset
為關鍵字,表示投影在元素內部。X軸偏移量、Y軸偏移量、模糊距離、陰影大小和陰影顏色都是屬性值,可以根據需要進行修改。
例如:
.box { width: 200px; height: 200px; background-color: #fff; box-shadow: inset 3px 3px 3px #ddd; }
上面的代碼表示給一個尺寸為200px*200px的盒子添加一個內側陰影,X軸偏移量為3px,Y軸偏移量為3px,模糊距離為3px,陰影顏色為灰色。
需要注意的是,在使用CSS3內側陰影時,如果元素設置的background-color
是透明的,就無法看到內部的陰影效果。
總之,使用CSS3內側陰影可以讓網頁元素看起來更加立體,加強了視覺效果,使得網頁設計更加美觀。
上一篇css3 剎車動畫
下一篇css3 動態 知乎