欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用CSS3的box-reflect設置文字倒影效果的方法講解

新浪博客   發(fā)布時間：2016-03-07 11:24:31   作者：劍華一笑   我要評論
這篇文章主要介紹了用CSS3的box-reflect設置文字倒影效果的方法講解,文中舉了包括遮罩效果在內(nèi)的一些基礎的例子,需要的朋友可以參考下

語法：

CSS Code復制內(nèi)容到剪貼板
  1. box-reflect：none | <direction> <offset>? <mask-box-image>?   
  2. <direction> = above | below | left | rightright  
  3. <offset> = <length> | <percentage>   
  4. <mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>  

    默認值：none
    適用于：所有元素
    繼承性：無


取值：
    none：無倒影
    <direction>　Demo: 簡單圖片倒影 See with Webkit
    above：指定倒影在對象的上邊
    below：指定倒影在對象的下邊
    left：指定倒影在對象的左邊
    right：指定倒影在對象的右邊
    <offset>　Demo: 圖片與倒影間隔 See with Webkit
    <length>：用長度值來定義倒影與對象之間的間隔。可以為負值
    <percentage>：用百分比來定義倒影與對象之間的間隔?？梢詾樨撝?br />    <mask-box-image>　Demo: 更真實的圖片倒影 文字倒影與漸變 See with Webkit
    none：無遮罩圖像
    <url>：使用絕對或相對地址指定遮罩圖像。
    <linear-gradient>：使用線性漸變創(chuàng)建遮罩圖像。
    <radial-gradient>：使用徑向(放射性)漸變創(chuàng)建遮罩圖像。
    <repeating-linear-gradient>：使用重復的線性漸變創(chuàng)建背遮罩像。
    <repeating-radial-gradient>：使用重復的徑向(放射性)漸變創(chuàng)建遮罩圖像。

如果你需要一個簡單倒影，你可以這樣做：
代碼

CSS Code復制內(nèi)容到剪貼板
  1. box-reflect: below;  

效果
201637113028812.png (268×51)

注意設置倒影元素的padding是會影響倒影位置的
<offset>允許你定義倒影與元素之間的距離：
代碼

CSS Code復制內(nèi)容到剪貼板
  1. box-reflect: below 10px;  

效果
201637113047931.png (204×69)

<mask-box-image>允許你用Gradient圖像或image作為遮罩：
代碼

CSS Code復制內(nèi)容到剪貼板
  1. box-reflect: below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3));  

效果
201637113105396.png (214×71)

相關(guān)文章

最新評論