<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Reflections文字倒影效果</title>
<style type="text/css">
img {
height: 200px;
position: absolute;
right: 0;
bottom: 0;
}
div {
border: 1px solid #666;
color: #666;
-webkit-box-reflect: below 5px;
}
h1 { text-align: center; }
</style>
</head>
<body>
<div>
<h1>《半身》--- 燕池</h1>
<p> 我远离生命的茂盛 不问前程<br/>
你打开苦难的里面 打开了我<br />
耳畔芳草鲜美<br />
眼前人生无畏 <br />
聚散无常<br />
枯荣有数<br />
去破坏一万个浮生 梦里清醒</br>
去拒绝浅薄的流浪 直取往生</p>
</div>
<img src="img/4.jpg" />
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Reflections文字倒影效果</title>
<style type="text/css">
img {
height: 200px;
position: absolute;
right: 0;
bottom: 0;
}
div {
border: 1px solid #666;
color: #666;
-webkit-box-reflect: below 5px;
}
h1 { text-align: center; }
</style>
</head>
<body>
<div>
<h1>《半身》--- 燕池</h1>
<p> 我远离生命的茂盛 不问前程<br/>
你打开苦难的里面 打开了我<br />
耳畔芳草鲜美<br />
眼前人生无畏 <br />
聚散无常<br />
枯荣有数<br />
去破坏一万个浮生 梦里清醒</br>
去拒绝浅薄的流浪 直取往生</p>
</div>
<img src="img/4.jpg" />
</body>
</html>