CSS 投影体

Question

我浏览了这里的其他答案，但一直遇到同样的问题，我也是 webdev 的新手。

我正在尝试创建一个宽度为 960 像素的 <div> 来封装整个页面，然后为其添加阴影。

每当我尝试其他人发布的解决方案时，所发生的只是投影应用于页面顶部的徽标图像，而不是其他任何地方，即投影不会继续超过徽标并封装导航栏、内容等。这是我的代码；

<body>

    <div=id"page">

    <header>

        <img src="images/blank_logo.png" height="243"  width="744" class="center">


            <nav>
                <ul>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                </ul>   
            </nav>

    </header>   

        <div id="content">
        <img src="images/ph.jpg" width="475" height="267" class="left">
        <img src="images/ph2.jpg" width="478" height="267" class="right">
        </div>

    </div>

</body>

这是 CSS;

body {

 width: 100%;
 max-width: 960px;
 margin: 0 auto;

}

#page {
-webkit-box-shadow:0px 5px 10px #1c1c1c;
-moz-box-shadow:0px 5px 10px #1c1c1c;
box-shadow:0px 5px 10px #1c1c1c;
}

谁能看出我错在哪里？

Answer 1

第一个打错了div

<div=id"page"> 应该是 <div id="page">

这是阴影效果的 fiddle（确保将结果 window 变大，否则您将看不到阴影）：

https://jsfiddle.net/4d4gt6kn/

Answer 2

打错了<div=id"page">会是<div id="page">

Answer 3

从 body 中删除 margin: 0 auto; 并更新其他人提到的拼写错误（<div=id"page"> 到 <div id="page">）

解决方案：

body {

 width: 100%;
 max-width: 960px;
 /* margin: 0 auto; */

}

#page {
-webkit-box-shadow:0px 5px 10px #1c1c1c;
-moz-box-shadow:0px 5px 10px #1c1c1c;
box-shadow:0px 5px 10px #1c1c1c;
}

<div id="page">

    <header>

        <img src="images/blank_logo.png" height="243"  width="744" class="center">


            <nav>
                <ul>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                </ul>   
            </nav>

    </header>   

        <div id="content">
        <img src="images/ph.jpg" width="475" height="267" class="left">
        <img src="images/ph2.jpg" width="478" height="267" class="right">
        </div>

    </div>

工作jsFiddle

Answer 4

是<div id="page">，不是<div=id"page">。我认为这就是问题所在。

CSS 投影体

CSS drop shadow body

html

css

drop-shadow