CSS3 0新屬性之box reflect 倒影

2021-07-23 08:59:43 字數 2081 閱讀 1197

例子:上下倒影

-webkit-box-reflect:below 0px webkit-gradient(

linear,

left top,左上

left bottom,左下

from(transparent),//起始位置是透明色的

color-stop(50%,transparent),在50%的位置也是有乙個透明的區域

to(rgba(255,255,255,.3))結束位置

); */

語法:

box-reflect:none | ? ?

= above | below | left | right

= |

= none | | | | |

預設值:none

適用於:所有元素

繼承性:無

取值:

none:無倒影

demo: 簡單倒影 see with webkit

above:指定倒影在物件的上邊

below:指定倒影在物件的下邊

left:指定倒影在物件的左邊

right:指定倒影在物件的右邊

demo: 與倒影間隔 see with webkit

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

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

demo: 更真實的倒影 文字倒影與漸變 see with webkit

none:無遮罩影象

:使用線性漸變建立遮罩影象。

:使用徑向(放射性)漸變建立遮罩影象。

:使用重複的線性漸變建立背遮罩像。

:使用重複的徑向(放射性)漸變建立遮罩影象。

左右倒影:

-webkit-box-reflect: left 1px -webkit-gradient(linear, 0% 100%,100% 100%,from(rgba(255,255,255,0)), to(white));

-webkit-box-reflect: right 1px -webkit-gradient(linear, 0% 100%,100% 100%, from(rgba(255,255,255,0)), to(white));

上下倒影:

-webkit-box-reflect: above 1px -webkit-gradient(linear, 0% 100%,100% 100%, from(rgba(255,255,255,0)), to(white));

-webkit-box-reflect: below 1px -webkit-gradient(linear, 0% 100%,100% 100%, from(rgba(255,255,255,0)), to(white));

字型倒影:

-webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(rgba(3,3,3,.2)));

文字漸變+倒影:

-webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(rgba(3,3,3,.2)));

background: -webkit-linear-gradient(top, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);

-webkit-background-clip: text;-webkit-text-fill-color: transparent;

CSS3 0屬性集合

變換屬性 transform rotate 設定元素的旋轉角度 格式 transform rotate 角度值 transform rotate 30deg deg代表 度 webkit transform rotate 30deg scale 設定元素的縮放變換 格式 transform scal...

vs怎麼支援css3 0

vs2010 在安裝standards update for vs2010 sp1後,vs2010中沒有css3.0問題,以下是我的解決方法 2 安裝 3 win r 輸入 regedit 開啟登錄檔 4 找到 hkey local machine software wow6432node micr...

CSS3 0入門筆記(二)

1.transition 運動時間 屬性 運動型別 延遲時間 transition 10s all ease 2s transition 1s width linear,2s height ease in,1s background ease 2.旋轉transform rotate 角度deg 旋...