CSS3漸變是CSS3中新增的功能之一，它可以實(shí)現(xiàn)更加多樣化的漸變效果。倒影是一種實(shí)現(xiàn)視覺效果的技術(shù)，它可以讓一個(gè)元素看起來像是在水面中的倒影。下面是如何使用CSS3漸變來實(shí)現(xiàn)倒影效果。

/* 首先定義一個(gè)類名為box的元素 */
.box {
width: 200px;
height: 200px;
background-color: #fff;
position: relative;
}
/* 定義倒影效果 */
.box::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
}

代碼解釋：

• 首先定義了一個(gè)名為box的元素，并為其設(shè)置了寬度、高度和背景顏色。
• 接著在box元素的后面通過偽元素::after定義了一個(gè)占據(jù)整個(gè)元素寬度，高度為原元素高度的60%的倒影元素。
• 在偽元素的background屬性中使用了linear-gradient函數(shù)，表示生成一個(gè)線性漸變。to bottom表示漸變方向從上到下，而rgba(255, 255, 255, 0.6)和rgba(255, 255, 255, 0)則表示透明度逐漸由0.6變?yōu)?，從而形成透明度逐漸減弱的倒影效果。

使用以上代碼即可在頁面中實(shí)現(xiàn)一個(gè)簡(jiǎn)單的倒影效果。