CSS3 box reflect 倒影效果

2021-07-14 12:39:03 字數 873 閱讀 1540

-webkit

-box

-reflect:none|?

-image

>?

1.屬性值direction:(4種)

2.屬性值offset:(可選引數)

定義反射偏移的距離,取值包括數值或百分比,其中百分比根據物件的尺寸進行確定。預設為0。

用長度值來定義倒影與物件之間的間隔。可以為負值。用百分比來定義倒影與物件之間的間隔。可以為負值。

3.屬性值mask-box-image:(可選引數)

定義遮罩影象,該影象將覆蓋投影區域。如果省略該引數值,則預設為無遮罩影象。

你無法兩次在鏡中

注視同一雙眼睛,同時

摘下因果倒置的酒杯

兩枚,先後經過的死者無法

接近更深的黑色

...p>

div>css

div

效果圖:

方法同上!哈哈哈….interesting

css3 box reflect 倒影效果

語法 box reflect 包括3個值。1.direction 定義方向,取值包括 above below left right。above 指定倒影在物件的上邊 below 指定倒影在物件的下邊 left 指定倒影在物件的左邊 right 指定倒影在物件的右邊 2.offset定義反射偏移的距離...

CSS3 0新屬性之box reflect 倒影

例子 上下倒影 webkit box reflect below 0px webkit gradient linear,left top,左上 left bottom,左下 from transparent 起始位置是透明色的 color stop 50 transparent 在50 的位置也是有...

使用CSS3製作倒影 box reflect

此屬性並不是w3c標準屬性,在具體使用之時,還是需要新增瀏覽器的私有屬性,根據瀏覽器的相容性,使用box reflect時需要新增 webkit和字首 webkit box reflect none box reflect none 從box reflect語法中可以得知,其主要包括以下幾個屬性值 ...