在这个页面上，box-shadow 样式似乎没有出现，但这只是添加超链接后的一个问题。请看代码。
盒子阴影在 Chrome 中似乎工作正常，这个问题主要出现在 Internet Explorer 中。
box-shadow 围绕着 DIV ID="container"。
感谢您的帮助!
这是页面的 HTML..
`<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="images/logo.png">
</div>
<div id="title">
<h1>FOOTBALL MANAGER</h1>
<h2>HOME</h2>
</div>
</div>
<div id="nav">
<a href="index.html">Home</a>
<a href="how_to_install.html">How To Install</a>
<a href="where_to_buy.html">Where To Buy</a>
<a href="about_us.html">About Us</a>
<a href="contact_us.html">Contact Us</a>
</div>
<div id="mheading">
<h4>Heading</h4>
</div>
<div id="fmlogo">
<p>fmlogo</p>
</div>
<div id="footer">
<span>
Copyright 2013 Top Notch Multi-Media
</span>
<span id="update">
Site last updated at 22:15 23 November 2013
</span>
</div>
</div>
</body>
</html>
`
还有 CSS..
'
@charset "utf-8";
body {
height:1100px;
background-color:#999; /*needs defining in house style */
margin:0px;
padding:0px;
}
h1 {
font-family: Verdana;
font-size: 53px;
text-shadow: 1px 1px 7px #000;
}
h2 {
font-family:Verdana;
font-size:35px;
text-shadow: 1px 1px 7px #000;
}
h3 {
font-family: Verdana;
font-size: 20px;
}
h4 {
font-family:Verdana;
font-size:35px;
margin: 0px;
}
#container {
width:950px;
height:1100px;
margin:0 auto;
background-color:#FFF;
border-style:solid;
border-width:1px;
border-color:#000;
/*order goes Horizontal offset, Vertical offset, Blur radius, Spread distance, Color */
box-shadow:0px 0px 100px 10px #000;
}
#header {
position:relative;
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
}
#title {
position:absolute;
top: 15px;
left: 315px;
}
#nav {
position:relative;
height: 60px;
margin: 0 auto;
background-color:#CF6;
border-style: solid;
border-color: black;
border-bottom-width:2px;
border-top-width:2px;
border-right-width:1px;
border-left-width:1px;
text-align: center;
}
a {
position: relative;
top: 3px;
display: inline-block;
margin: -3px;
height: 56px;
width: 188px;
background-color: #E39734;
border-style: solid;
border-width: 2px;
border-color: #000;
text-align: center;
font-family: Verdana;
font-size: 20px;
line-height: 55px;
}
#button {
position: relative;
top: 3px;
display: inline-block;
margin: -3px;
height: 56px;
width: 188px;
background-color: #E39734;
border-style: solid;
border-width: 2px;
border-color: #000;
text-align: center;
font-family: Verdana;
font-size: 20px;
line-height: 55px;
}
.button:hover {
background-color: #BD7E2D;
}
a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #636363;
}
#logo {
position:absolute;
height:130px;
width:340px;
top:17px;
left: -10px;
border-style: solid;
border-width:0px;
border-color:black;
}
img {
width: 100%;
}
#mheading {
position:relative;
top: 10px;
left: 5px;
width: 940px;
height: 50px;
border-style: solid;
border-width: 1px;
border-color: #000;
text-align:center
}
#fmlogo {
position: relative;
margin: 0px;
top: 649px;
margin: 0 auto;
width: 940px;
height: 100px;
border-style: solid;
border-color: #000;;
border-width: 1px;
text-align: center;
}
#footer {
position: relative;
margin: 0px;
top: 659px;
width: 940px;
height: 30px;
background-color: #9F3;
border-style: solid;
border-color: black;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
padding-left: 5px;
padding-right:5px;
padding-top: 20px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
}
#update {
float: right;
}
'
最佳答案
您使用的是什么版本的 IE？如果是 IE 9 或更低版本，则必须在容器类 css 声明中使用以下内容:
border-collapse: separate;
关于html - Box-Shadow 没有出现？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20248667/