如何用css实现文字渐变倒影？求教怎么做？

4回答

woshiajuana

<!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>

2 0

怪盗饭团

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); }

1 0

qq_为爱逆战_0

/*阴影的水平位置；阴影的垂直方向位置；阴影的模糊程度；阴影的颜色*/ text-shadow: 50px 0 50px black;

0 0