我想从psd文件中使此框阴影如下:
我做了一个截图:
http://s3.postimg.org/k59bfo5s3/boxshadow.png
我不知道如何通过CSS代码来做到这一点
但是我的另一个想法是我也想从PSD文件中提取阴影
并将其移动到我的html页面,但是我不知道我可以在哪里放置阴影图像的代码
http://jsfiddle.net/4pbq2tx8/11/
的HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=utf-8>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/carousel.js"></script>
<div id="carousel">
<div class="title">title</div>
</div>
</body>
</html>
css:
#carousel {
border:solid 1px #1a1a1a;
position:relative;
width:903px;
height:299px;
margin:0 auto;
margin-top: 50px;
background:url(http://s22.postimg.org/l2e24m48x/light.png) ;
/* my probleme is here */
box-shadow: url(http://s14.postimg.org/7tmkd1hfl/shadow.png);
}
body {
background-color: #c7c7c7;
}
.title {
position:absolute;
width:902px;
height:47px;
bottom: 0;
left:0;
line-height: 47px;
border:solid 0.5px #686868;
background:url(http://s22.postimg.org/s4bzqt7up/title.png) bottom left repeat ;
}
最佳答案
1 /
试试看:
#carousel:after {
position: absolute;
z-index: 9999;
bottom: -100px;
content: " ";
width: 100%;
height: 100px;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
JSFIDDLE LINK
2 /
如果您希望阴影的长度精确到1100像素,则需要更改以下内容:
.wrap {
position: relative;
width: 1100px;
}
.wrap:after {
position: absolute;
bottom: -95px;
z-index: 9999;
content: " ";
height: 100px;
width: 100%;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
并将
#carousel
包裹在.wrap
中<div class="wrap">
<div id="carousel">
...
</div>
</div>
JSFIDDLE WITH WRAPPER