文章标题

最新推荐文章于 2024-04-22 16:59:44 发布

原创最新推荐文章于 2024-04-22 16:59:44 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用CSS实现图片倒影的技术方案。通过-webkit-box-reflect属性，可以轻松地为网页中的图片添加底部倒影效果，增强视觉体验。

倒影

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
img {
    height:250px;
    -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
</style>
</head>

<body>
<img src="images/bg1.jpg"  />
</body>
</html>