像这个样子的能倾斜的话就更好了
4 回答
woshiajuana
TA贡献211条经验 获得超152个赞
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="js/style.css"/>
<style>
.container{
width: 1000px;
margin: 100px auto 0;
font-size: 32px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.top{
color: aqua;
-webkit-box-reflect: below 0 -webkit-linear-gradient(transparent,transparent 30%,rgba(255,255,255,.2));
}
</style>
</head>
<body>
<div class="container">
<div class="top"><span>你好呀</span></div>
</div>
</body>
</html>
怪盗饭团
TA贡献97条经验 获得超118个赞
HTML部分
<div class="wrap"> <div class="image"><img src="1.jpg" /></div> <div class="down"> <div class="reflection"></div> <div class="overlay"></div> </div> </div>
CSS部分
body{background:#000;color:#f00}
.wrap{position:relative;}
.image{margin-bottom:3px;}
.down{position: relative;}
.reflection{width:421px;height:180px;background:url(1.jpg) bottom center no-repeat;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
opacity:0.5;
filter:alpha(opacity='50');
}
.overlay{position: relative;width:421px;height:180px;bottom:149px;
background-image: -moz-linear-gradient(center bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 90%);
background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, rgb(0,0,0) 30%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(0,0,0)), color-stop(0.90, rgba(0,0,0,0)));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
}
- 4 回答
- 2 关注
- 4818 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消