如何解决如何删除HTML / CSS中未声明的边框
因此,我在页面上创建了“手风琴”菜单,但是,未创建或声明的实际手风琴周围似乎有阴影边框或阴影。
我已经尝试过删除包含创建边框,内边距,边距和阴影的所有线条的尝试。但是我无法将其删除或掩饰。
@import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
margin: 0;
padding: 0;
Box-sizing: border-Box;
}
h1 {
text-align: center;
margin: 2rem 0;
font-size: 2.5rem;
}
.accordion {
width: 90%;
max-width: 1000px;
margin: 2rem auto;
}
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.5rem;
Box-shadow: 0 2px 5px 0 rgba(0,0.25);
}
.accordion-item-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-item-header::after {
content: "\02C7";
font-size: 2rem;
position: absolute;
right: 1rem;
color: orange;
}
.accordion-item-header.active::after {
content: "\02C6";
}
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
border-top: 1px solid;
border-image: linear-gradient(to right,transparent,#34495e,transparent) 1;
}
@media(max-width:767px) {
html {
font-size: 14px;
}
}
<div class="accordion">
<div class="accordion-item">
<div class="accordion-item-header">
Title for card 1
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
Section for Card 1
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
Title for Card 2
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
Section for Card 2
</div>
</div>
</div>
</div>
解决方法
它不是围绕整个手风琴,而是其中的每个元素。
在-乃至整个-中取出盒子阴影:
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.5rem;
box-shadow: 0 2px 5px 0 rgba(0,0.25);
}
您可能还想摆脱以下内容中给出的边界:
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
border-top: 1px solid;
border-image: linear-gradient(to right,transparent,#34495e,transparent) 1;
}
但是我不能从这个问题中分辨出来。
,我看不到任何边框,请看一下代码片段。这是完整的代码吗?你没想念什么吗?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
text-align: center;
margin: 2rem 0;
font-size: 2.5rem;
}
.accordion {
width: 90%;
max-width: 1000px;
margin: 2rem auto;
}
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.5rem;
box-shadow: 0 2px 5px 0 rgba(0,0.25);
}
.accordion-item-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-item-header::after {
content: "\02C7";
font-size: 2rem;
position: absolute;
right: 1rem;
color: orange;
}
.accordion-item-header.active::after {
content: "\02C6";
}
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
border-top: 1px solid;
border-image: linear-gradient(to right,transparent) 1;
}
@media(max-width:767px) {
html {
font-size: 14px;
}
}
<div class="accordion">
<div class="accordion-item">
<div class="accordion-item-header">
Title for card 1
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
Section for Card 1
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
Title for Card 2
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
Section for Card 2
</div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。