您的位置：首页 > Web前端 > CSS

CSS-实现的倒影的效果

2013-12-30 20:35 113 查看



 
 <!DOCTYPE
html>
<html>
<head>
   
<meta charset="utf-8">
   
<title>css的倒影的效果</title>
   
<style>
   
 
  
   
   
-webkit-box-reflect:位置 距离px -webkit-gradient()
   
   
位置选项:above,below,left,right
   
 
  
   
    .box{
   
     
  font-size: 72px;
   
     
  color: red;
   
     
  -webkit-box-reflect:
   
     
  below -8px
   
     
  -webkit-gradient(linear,
   
     
      left
top,left bottom,
   
     
     
from(rgba(0,0,0,0)),
   
     
     
to(rgba(255,255,255,0.5)));
   
    }
   
</style>
</head>
<body>
   
<div class="box"><img
src="images/shadow1.jpg"
width="200"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航