CSS倒影

前面的話

  CSS倒影目前只有chrome和safari瀏覽器支持，需要添加-webkit-前綴。本文將詳細介紹CSS倒影box-reflect

 

語法

#-webkit-box-reflect

初始值: none

應用於: 區塊級元素(包括inline-block)

繼承性: 無

值: none | <direction> #<offset>? <mask-box-image>?

  <direction>(必須)表示box-reflect產生倒影的方向，主要包括以下幾個值：

above:表示生成的倒影在对象(原图)的上方；
below:表示生成的倒影在对象(原图)的下方；
left:表示生成的倒影在对象(原图)的左侧；
right:表示生成的倒影在对象(原图)的右侧；

  <offset>(可選)用來設定產生倒影與物件（原圖）之間的間距，其取值可以是固定的像素值，也可以是百分比值

  <mask-box-image>(可選)用來設定倒影的遮罩效果，可以是背景圖片，也可以是漸層產生的背景圖像

 更多CSS倒影 相關文章請關注PHP中文網！