CSS是一種很強(qiáng)大的樣式表語(yǔ)言，可以實(shí)現(xiàn)很多想象不到的效果，其中之一就是水中倒影。 下面我們就來(lái)學(xué)習(xí)一下如何用CSS實(shí)現(xiàn)水中倒影。

/* 創(chuàng)建div，并為其設(shè)置寬度和高度 */
div {
width: 300px;
height: 200px;
background: #fff;
position: relative;
}
/* 創(chuàng)建倒影div，并為其設(shè)置寬度和高度 */
div::after {
content: "";
width: 100%;
height: 50%;
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
position: absolute;
bottom: 0;
left: 0;
transform: scaleY(-1);
}

首先我們要?jiǎng)?chuàng)建一個(gè)div，并為其設(shè)置寬度和高度。接著，我們要通過(guò)偽類選擇器：after創(chuàng)建一個(gè)倒影div，并為其設(shè)置寬度和高度，同時(shí)在background中使用了CSS漸變效果。

最后，我們通過(guò)位置設(shè)置讓倒影div位于主div下方，然后用CSS的transform屬性將其沿Y軸旋轉(zhuǎn)180度即可實(shí)現(xiàn)倒影效果。

以上就是使用CSS實(shí)現(xiàn)水中倒影的方法。 CSS有著強(qiáng)大的功能，只要我們發(fā)揮想象，就可以創(chuàng)造出更多奇妙的效果。