我想从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

10-05 20:56
查看更多