gpt4 book ai didi

html - 为什么盒子阴影不起作用?

转载 作者:太空宇宙 更新时间:2023-11-04 14:53:09 26 4
gpt4 key购买 nike

我必须为学校写一个网站,我想在 CSS 中使用 box-shadow 但它不起作用。没有影子。我想在标题 div 框下有阴影

html

<html>
<head>
<title>DABA - Videoverleih</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<div id="header">
<h1>Videoverleih</h1>
</div>

<div id="content">

</div>
</body>

CSS

#header {
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
background-color: #AA0000;
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 12%;
}

#header h1 {
color: #FFFFFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}

#content {
background-color: #FFFFFF;
position: absolute;
left: 0;
top: 12%;
width: 100%;
height: 88%;
}

我该怎么做才能让它发挥作用?

最佳答案

box-shadow 就在那里。但是使用 position: absolute 使 #content 堆栈在 #header 之上。

如果你想使用position,你可以添加z-index来确保头部堆叠在最上面。

Information about z-index

#header {
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
background-color: #AA0000;
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 12%;
z-index: 1;
}

#header h1 {
color: #FFFFFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}

#content {
background-color: #FFFFFF;
position: absolute;
left: 0;
top: 12%;
width: 100%;
height: 88%;
}
<div id="header">
<h1>Videoverleih</h1>
</div>

<div id="content">

</div>

关于html - 为什么盒子阴影不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47750563/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com