请参阅图像。 如图所示,我想通过给它的阴影垂直弯曲图像。 尝试了很多,但无法得到它。阴影制作图像弯曲
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.main{
background-image: url('http://www.detaildesignonline.com/contentimages/sky1285264350.jpg');
min-height: 600px;
border-bottom-style: solid;
border-bottom-color: rgba(4,58,106,1);
border-bottom-width: 10px;
}
.heading{
font-weight: 900;
color:#004B81;
}
.more{
color:rgba(159,67,66,1);
}
.leftForm{
background-color: rgba(224,237,222,1);
height: 350px;
}
.rightForm{
background-color: rgba(253,253,253,0.7);
height: 350px;
}
</style>
</head>
<body>
<div style="height:10px; background-color:orange"></div>
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-10">
<div><img src="http://tollfreecustomercarenumber.com/wp-content/uploads/2015/11/ICICI-bank.jpg" height="100px" width="250px"></div>
<div class=""></div>
</div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-10 main">
<div class="col-sm-1">
</div>
<div class="col-sm-11">
<h3 class="heading">We've got all your Forex needs covered!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae mi et leo tristique <br>tincidunt ac nec est. Aenean volutpat mauris vitae erat ultricies varius.</p>
<p><b class="more">What's more? </b><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas <br>vitae mi et leo tristique tincidunt ac nec est.</b></p>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-5 leftForm">
<form role="form">
<br>
<h3 style="color:rgba(159,67,66,1); margin-top:0px">Sign In</h3>
<div class="form-group col-xs-8">
E-Mail ID
<input type="email" style="border: 2px solid orange;" class="form-control" id="email">
</div>
<div class="form-group col-xs-8">
Password
<input type="password" style="border: 2px solid orange;" class="form-control" id="pwd">
</div>
<div class="col-xs-12">
<input type="submit" class="btn btn-default" style="background-color:rgba(159,67,66,1); color:white" value="LOG IN"></input><br>
<small style="color:rgba(159,67,66,1)"><u><a style="color:rgba(159,67,66,1)" href="#">Forgot Password?</a></u></small>
</div>
</form>
</div>
<div class="col-sm-5 rightForm">
<form role="form">
<br>
<h3 style="margin-top:0px">Sign Up</h3>
<div class="form-group col-xs-8">
*E-Mail ID
<input type="email" class="form-control" id="email">
</div>
<div class="form-group col-xs-8">
*Password
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group col-xs-8">
*Re-enter Password
<input type="password" class="form-control" id="pwd">
</div>
<div class=" col-xs-12">
<button type="submit" class="btn btn-default" style="background-color:rgba(102,102,102,1); color:white">SIGN UP</button>
</div>
</form>
</div>
<div class="col-sm-1"></div>
<!-- <p style="height:10px; bottom:0px; background-color:rgba(4,58,106,1)"></p> -->
</div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-10">
<br>
<div style="line-height:23px"><p style="color:rgba(102,102,102,1); font-size:12px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae mi et leo tristique tincidunt ac nec est. Aenean volutpat mauris vitae erat ultricies varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae mi et leo tristique tincidunt ac nec est. Aenean volutpat mauris vitae erat ultricies varius. Aenean volutpat mauris vitae erat ultricies varius. Lorem ipsum dolor sit amet</p></div>
<div class=""></div>
</div>
<div class="col-sm-1"></div>
</div>
没有在所有 – tryintolearn
这本没有工作做一个透视阴影,但在'main'容器的底部。你需要在两边调整它并调整阴影大小。 – horcrux