這個例子靈感來源于實現一個登錄框下方的倒影：

.box {
width: 300px;
height: 200px;
border: 1px solid #1f637b;
-webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(255, 255, 255, 0.0),rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.1), rgba(100, 119, 135, 0.5));
color: #fff;
position: absolute;
top: 100px;
margin: 100px auto;
border-radius: 5px;
border-color: rgba(255,255,255,0.5);
box-shadow: 1px 1px 14px rgba(255, 255, 255, 0.4), inset -11px 3px 131px rgba(100, 119, 135, 0.8);
} .login,.reset{
width: 90px;
height: 30px;
border-color: rgba(77, 96, 110, 0.1);
background: rgba(140, 155, 165, 0.5);
color: #fff;
font-size: 17px;
margin-left: 36px;
margin-top: 14px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2), inset 0 20px 30px rgba(26, 39, 47, 0.5);
-moz-box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2), inset 0 20px 30px rgba(26, 39, 47, 0.5);
box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2), inset 0 20px 30px rgba(26, 39, 47, 0.5);
} 實現效果：


關鍵點：倒影的取色和位置需要與上面的顏色對應，用透明度控制即可；（添加兩到三個紅色，因為倒影最淡的顏色部分其實就是紅色，添加兩個可使之更加自然）；

轉載于:https://www.cnblogs.com/LindaBlog/p/10451803.html

總結

以上是生活随笔為你收集整理的倒影问题（reflect:below）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。