Question

我想从psd文件中像这个盒子阴影一样：我做了一个截图：

http://s3.postimg.org/k59bfo5s3/boxshadow.png

我不知道如何通过css的代码来实现这个目标

但我的另一个想法是我也想从PSD文件中提取影子

并将其移至我的html页面，但我不知道我可以在哪里放置阴影图像的代码

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

Answer 1

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 /

如果您希望阴影的长度精确到1100px，则需要更改一些内容：

.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

Answer 2

你的阴影看起来像一个3D物体，所以利用它，并使用带有阴影的3D伪元素：

#carousel {
    -webkit-perspective: 500;
    -webkit-perspective-origin: 50% 50%;
}

#carousel:after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -45px;
    height: 50px;
    background-color: #888;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(80deg);
    box-shadow: 0 0 20px 15px #888;
}

<强> jsFiddle

在chrome上测试过。也应该在Safari上工作。对于其他浏览器，您需要添加其供应商前缀-moz-，-ms-。

旧浏览器不支持3D转换，这没关系。不会出现阴影。 http://dowebsitesneedtolookexactlythesameineverybrowser.com/

此外，您不需要也不应该使用图像。您可以使用线性渐变复制相同的效果。

显示像图像的盒子阴影

2 个答案:

1 /

2 /