Box-Shadow 没有出现答案

【问题标题】：Box-Shadow not showing upBox-Shadow 没有出现
【发布时间】：2016-02-16 05:26:26
【问题描述】：

在编码方面，我完全是新手。我现在正在学校上一门 HTML 课程，但我正在尝试创建的页面有问题。我现在正在学习 CSS，在一个练习页面中，我使 #container 中包含的 box-shadow 没有出现在我的 div 中。当我打开“答案”页面来测试我的浏览器时，它会显示出来，但在我的页面上几乎没有相同的代码。任何帮助将不胜感激，因为这让我发疯。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Bistro</title>
<meta charset="utf-8">
<style>
body {background-image: url(background.jpg);
font-family: Arial, Verdana, sans-serif;
}
h1 { background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
height: 100px; width: 650px;
font-size: 3em; 
padding-left: 150px; padding-top: 30px;
border: 1px solid #000033;
border-radius: 15px; 
text-shadow: 3px 3px 3px #666;
}
h2 { color: #000033; 
font-family: arial, sans-serif;
text-shadow: 1px 1px 0 #ccc;
}
#container { background-color: #ffffff;
padding: 20px;
width: 80%; min-width: 800px; max-width: 960px;
margin-right: auto;
margin-left: auto;
box-shadow: 5px 5px 5px #lelele; 
}
footer { font-size: .80em;
font-style: italic;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>Lighthouse Bistro</h1>
</header>
<nav><a href="index.html">Home</a> &nbsp;<a href="menu.html">Menu</a> &nbsp;
<a href="directions.html">Directions</a> &nbsp;<a 
href="contact.html">Contact</a></nav>
<main>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are
available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-
fruit muffins, scones, croissants, and cinammon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with
locally-grown salad, fruit, and vegetables. </p>
</main>
<footer>Copyright &copy; 2014 Your Name Here</footer>
</div>
</body>
</html>

【问题讨论】：

标签： html shadows

【解决方案1】：

您当前使用的box-shadow 实际上并没有使用颜色。相反，您拥有#lelele 而不是#1e1e1e。不同的是，第一个不是颜色，因为您使用的是小写 L。

【讨论】：

哈哈哇，我是个白痴。非常感谢你，我永远不会明白这一点！

【解决方案2】：

您的#lelele 不是颜色代码所以请更改颜色并执行此代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Lighthouse Bistro</title>
    <meta charset="utf-8">
    <style>
    body {background-image: url(background.jpg);
    font-family: Arial, Verdana, sans-serif;
    }
    h1 { background-image: url(lighthouselogo.jpg);
    background-repeat: no-repeat;
    height: 100px; width: 650px;
    font-size: 3em; 
    padding-left: 150px; padding-top: 30px;
    border: 1px solid #000033;
    border-radius: 15px; 
    text-shadow: 3px 3px 3px #666;
    }
    h2 { color: #000033; 
    font-family: arial, sans-serif;
    text-shadow: 1px 1px 0 #ccc;
    }
    #container { background-color: #ffffff;
    padding: 20px;
    width: 80%; min-width: 800px; max-width: 960px;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 2px 2px 10px #ff0000; 
    }
    footer { font-size: .80em;
    font-style: italic;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <header>
    <h1>Lighthouse Bistro</h1>
    </header>
    <nav><a href="index.html">Home</a> &nbsp;<a href="menu.html">Menu</a> &nbsp;
    <a href="directions.html">Directions</a> &nbsp;<a 
    href="contact.html">Contact</a></nav>
    <main>
    <h2>Locally Roasted Free-Trade Coffee</h2>
    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are
    available hot or cold.</p>
    <h2>Specialty Pastries</h2>
    <p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-
    fruit muffins, scones, croissants, and cinammon rolls.</p>
    <h2>Lunchtime is Anytime</h2>
    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with
    locally-grown salad, fruit, and vegetables. </p>
    </main>
    <footer>Copyright &copy; 2014 Your Name Here</footer>
    </div>*emphasized text*
    </body>
    </html>

【讨论】：