整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
果圖如下：
代碼展示如下：
<style>
h1 {
font-size: 50px;
text-align: center;
color:slateblue;
filter: hue-rotate(240deg);
-webkit-box-reflect: below 1px linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
}
img{
filter: hue-rotate(120deg);
-webkit-box-reflect: right 1px;
}
</style>
<h1>你看到了什么</h1>
<img src="https://img1.baidu.com/it/u=1964477391,3223175982&fm=26&fmt=auto" alt="" width="200px" >屬性說明：
filter: hue-rotate(angle)
給圖像應用色相旋轉。“angle”設定圖像會被調整的色環角度值。值為0deg，則圖像無變化。
若值未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值相當于又繞一圈。
-webkit-box-reflect
是webkit內核瀏覽器的一個私有屬性，用來對block(塊級)元素或者行內塊元素（img,input）制作一個鏡像的效果
?? above：指定倒影在對象的上邊
??below：指定倒影在對象的下邊
?? left：指定倒影在對象的左邊
?? right：指定倒影在對象的右邊
?? offset：倒影與對象之間的間隔，可以為負值。
、相關知識點
介紹
文檔
MDN關于倒影屬性介紹：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect
官方說明：
非標準:該特性是非標準的，不在標準軌道上。不要在面向Web的生產站點上使用它:它并不適用于每個用戶。實現之間也可能存在很大的不兼容性，將來行為可能會發生變化
瀏覽器兼容性：
總結
雖然這是個非標準屬性，但是大多數瀏覽器都支持，火狐除外，追求效果的還是可以使用的。
支持三個位置的屬性值：
-webkit-box-reflect：屬性值1 屬性值2 屬性值3；
-webkit-box-reflect: above; /* 上 */
-webkit-box-reflect: below; /* 下 */
-webkit-box-reflect: left; /* 左 */
-webkit-box-reflect: right; /* 右 */-webkit-box-reflect: below 10px; /* 下，距離10像素 */-webkit-box-reflect: below 0 linear-gradient(transparent, white);
/* 下，距離0像素，線性遮罩最后白色 */ 完整代碼：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body { margin: 0; }
#time {
width: 300px;
height: 80px;
line-height: 80px;
font-size: 48px;
text-align: center;
font-weight: bold; /* 下 */
color: #fff;
background-color: #2196f3;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0004);
}
</style>
</head>
<body>
<div id="time"></div>
<script>
function refreshTime(){
let time = document.getElementById('time');
let h = new Date().getHours(); //小時
let m = new Date().getMinutes(); //分鐘
let s = new Date().getSeconds(); //秒
time.innerHTML = `${h}:${m}:${s}`
setTimeout(refreshTime, 1000)
}
refreshTime()
</script>
</body>
</html>以上就是今天要講的內容，本文介紹CSS倒影屬性，更多詳細內容，自己多寫寫代碼，多練練，可以參考https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect。
如果覺得有用歡迎點贊，關注
有問題私信我！！
看一下這樣的效果。這里展示了四張圖片，每一個圖片都有一個倒影。當鼠標旋轉每個圖片的時候倒影會消失，并且把圖片放大顯示。接下來跟著我一起完成這樣的效果制作。
·這里展示了一個空白的HTML模板，來設置一下它的背景顏色。
·bargain設置為邊距為零，內邊距也為零，背景顏色為黑色。
·再添加一個INMAX標簽，添加上圖片。這個圖片當前是沒有任何效果的，就直接的展示出來了。
·給圖片添加一個樣式，設置一個寬度為一百五十像素。這個時候發現這個圖片是靠左上角的，設置一個next布局body。
·再設置一下它的高度為一百，根據這個四口來設置高度，寬度也是。現在就可以把它在窗口的頁面上進行劇終了。
·再來設置一下它的圖片樣式。
·order top left，左上角的圓角設置成十像素，右上角也設置成十像素的圓角。
·這個時候遇到一個關鍵的問題，怎么樣去把設置成一個倒影，增加一個倒影？它有這么一個屬性，這里有設置一下它的倒影，往下的倒影讓倒影離開主要圖片的五個像素的間距，間距也就是這里的縫隙。
·再設置一下顏色，這個顏色來設置一個漸變的，這個時候是空白的，這樣子就產生了這樣的倒影。但是倒影還是太高了一點，可以給透明加一個，如果不夠可以繼續加，這樣子就差不多了，設置成八十暗一點，這樣子就有了一個倒影。
·再設置一下鼠標懸停，懸停是沒有效果的，可以給英美的標簽添加一個鼠標懸停的效果。
·然后是它的放大，放大為一點五倍，這個時候放大縮小是很生硬的，可以在這里加上零點五秒的過渡時間，但倒影還沒有消失，希望它的倒影消失一下。
·可以繼續設置一下屬性，它有一個on set，也就是恢復到默認設置。這個時候再來看一下，再給它添加外發光的效果，這樣就出現了這個效果。
·給元素多復制幾個，這個時候再來看一下，但它是挨在一起的，可以給元素設置一個外邊距，上下為零，左右為十像素，可以設置成五像素。
·這個時候再來看，這個時候會發現后邊的一張圖片會遮住前面的那張圖片，但這不是想要的，可以在over的時候把英美解的元素的層級往上走一下，這樣子設置到最高，就展現到最前面，外發光效果還是太小小了點，這樣子看起來就好看一些。
·如果圖片放大了，最好是把左下角也設置成圓角，也可以這里設置一下。再來看一下，這樣子是不是放大的時候全為圓角了。
今天的展示就到這里，謝謝大家。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
