CSS3倒影是一種在網頁中使用CSS3樣式來實現圖像倒影效果的技術。
img{ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(250, 250, 250, 0.1))); box-reflect: below 0px linear-gradient(to bottom, transparent 70%, rgba(250, 250, 250, 0.1) 100%); }
上述代碼是實現倒影效果的關鍵代碼。其中,-webkit-box-reflect
用于在Safari和Chrome瀏覽器中實現倒影效果,而box-reflect
則用于其他的瀏覽器。
在代碼的具體實現中,需要設置倒影距離(本例中為0px),倒影的漸變效果(參數linear-gradient
),以及倒影的透明度等屬性。
使用CSS3倒影技術,可以為網頁中的圖片、文字等元素增加生動的倒影效果,為用戶帶來更加優美的視覺體驗。