html - CSS 框阴影在我不想要的时候在文字上使用阴影
问题描述
我对编码有点陌生,但是在向导航栏添加框阴影时,它也会给 #href 链接带来阴影。我不希望文字有阴影,只是导航栏的底部。
body {
background-color: grey;
font-family: 'Poppins', sans-serif;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.4;
color: var(--main-white);
}
#nav {
display: flex;
justify-content: flex-end;
z-index: 1;
padding: 10px 25px 10px 10px;
font-size: 35px;
font-family: 'Poppins', sans-serif;
color: #ffa2ae;
box-shadow: 0 2px rgba(0, 0, 0, 0.4);
text-decoration: none;
}
#nav {
background: #81f7ff;
}
*, *::before, *::after {
box-sizing: inherit;
* {
margin: 0;
padding: 0
}
<main>
<section id="nav" name="nav">
<a href="#home" id="nav" name="home-nav">Home</a>
<a href="#purchase" id="nav" name="purchase-nav">Purchase</a>
<a href="#contact" id="nav" name="contact-nav">Contact</a>
</section>
</main>
解决方案
您的锚点似乎ID
与您的父 ID 相同,nav
因此您需要做的是删除它,这将解决您的问题。谢谢
CSS
body {
background-color: grey;
font-family: 'Poppins', sans-serif;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.4;
color: var(--main-white);
}
#nav {
display: flex;
justify-content: flex-end;
z-index: 1;
font-size: 35px;
font-family: 'Poppins', sans-serif;
box-shadow: 0 2px rgba(0, 0, 0, 0.4);
background: #81f7ff;
}
#nav a{
text-decoration: none;
padding: 10px 25px 10px 10px;
color: #ffa2ae;
}
*, *::before, *::after {
box-sizing: inherit;
* {
margin: 0;
padding: 0
}
HTML
<main>
<section id="nav" name="nav">
<a href="#home" name="home-nav">Home</a>
<a href="#purchase" name="purchase-nav">Purchase</a>
<a href="#contact" name="contact-nav">Contact</a>
</section>
</main>