倒影
-webkit-box-reflect: left 10px -webkit-linear-gradient( right , rgba(255,0,0,0.3) , rgba( 255,255,255 ,0.5) );
谷歌瀏覽器的寫法 （這個(gè)不同的瀏覽器的寫法好像不一樣）
-webkit-box-reflect: left 表示倒影在左邊 10px 是指倒影和原圖之間的距離 下來(lái)是漸變的代碼
漸變 （背景顏色漸變）
background: -webkit-linear-gradient( left , blue, red,green);
background: linear-gradient( to left , blue, red,green);
兩種寫法 第一種加上瀏覽器的兼容 這時(shí)候漸變的方向就不能加 “to”
兩種寫法的區(qū)別： 第一種的方向表示從哪個(gè)方向開(kāi)始 第二種寫法是 向著“to”的方向開(kāi)始漸變
線性漸變
支持方向用角度表示
background:-webkit-linear-gradient(45deg,blue ,red,pink) ;
漸變可以設(shè)置多個(gè)顏色
background: -webkit-linear-gradient( left , blue, red,green);
/* 50px 60px 代表連個(gè)顏色之間的過(guò)渡區(qū)域的50px到60px 之間 */
background:-webkit-linear-gradient( 0deg ,blue 50px ,red 60px) ;
可以設(shè)置百分比
background:-webkit-linear-gradient( 0deg,blue 20% ,red 80%) ;
漸變的部分是可以重復(fù)的
background:-webkit-repeating-linear-gradient(0deg,blue 50% ,red 100%) ;
鏡像漸變
background: -webkit-radial-gradient( blue 100px ,red 100px)
background: -webkit-radial-gradient( bottom, blue 50px ,red 100px)
background: -webkit-repeating-radial-gradient( blue 50px ,red 100px)
/* 在矩形內(nèi)，鏡像漸變是橢圓 可以添加 circle樣式 使其變成圓形 */
background: -webkit-repeating-radial-gradient( #F2AA84 50px ,#676767 100px)
遮罩
-webkit-mask-image: url('img/zzz.png') ;
-webkit-mask-size: 400px 400px;
-webkit-mask-position: 0 0;
遮罩要用 png 圖片 不透明的部分會(huì)顯示 原來(lái)層面上的東西
透明部分則為空白 可以設(shè)置遮罩層的尺寸和位置 默認(rèn)遮罩層是重復(fù)鋪滿整個(gè)div的 沒(méi) 有 “repret” 這個(gè)屬性
