像這個樣子的能傾斜的話就更好了
4 回答
woshiajuana
TA貢獻211條經(jīng)驗 獲得超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條經(jīng)驗 獲得超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);??
}
qq_為愛逆戰(zhàn)_0
TA貢獻2條經(jīng)驗 獲得超0個贊
/*陰影的水平位置；陰影的垂直方向位置；陰影的模糊程度；陰影的顏色*/
? ? ? ? ? ? text-shadow: 50px 0 50px black;
添加回答
舉報
0/150
提交
取消