box-reflect//加個倒影效果；（一分鐘搞定）

時間 2019-11-13

標籤 box reflect 倒影效果一分鐘搞定简体版

原文原文鏈接

box-reflect:

舉個栗子：

效果：（能夠是任何內容，文字或者圖片）html

代碼：web

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-reflect</title>
</head>
<style>
    .caption{
        margin-top:50px;
        width:100%;
        text-align: center;
        box-reflect:below -4px linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));
        -webkit-box-reflect: below -4px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));

    }
</style>
<body>
    <div class="caption">
        <h1>要個倒影</h1>
    </div>
</body>
</html>

屬性介紹：url

 -webkit-box-reflect：none |  ? ?
 box-reflect:none | ? ?

屬性說明：
none：此值爲默認值，表示無倒影；
direction：生成倒影的方向
above：指定倒影在對象的上邊 below：指定倒影在對象的下邊 left：指定倒影在對象的左邊 right：指定倒影在對象的右邊
offset：圖片與倒影間隔
length：用長度值來定義倒影與對象之間的間隔。能夠爲負值 percentage：用百分比來定義倒影與對象之間的間隔。能夠爲負值
mask-box-image：用來設置倒影的遮罩效果；
值能夠是：
none：無遮罩圖像 url：使用絕對或相對地址指定遮罩圖像。
 linear-gradient：使用線性漸變建立遮罩圖像。 
radial-gradient：使用徑向(放射性)漸變建立遮罩圖像。
 repeating-linear-gradient：使用重複的線性漸變建立背遮罩像。
 repeating-radial-gradient：使用重複的徑向(放射性)漸變建立遮罩圖像。

其餘栗子，加載中...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。