gpt4 book ai didi

html - Css 隐藏 div 之外的红线(是一个跨度)?

转载 作者:太空宇宙 更新时间:2023-11-03 22:18:28 24 4
gpt4 key购买 nike

请引用附件 image

如何从 div 中隐藏红线(它的跨度)?
留边距不起作用,因为线离开了另一边。
怎么解决?

@keyframes linewidth1 {
0%{
border-bottom: 4px solid white;
width: 0%;
}
25%{
border-bottom: 4px solid white;
border-bottom: 4px solid white;
width: 0%;
}
60%{
border-bottom: 4px solid white;
border-bottom: 4px solid white;
}
75%{
border-bottom: 2px solid transparent;
border-bottom: 2px solid transparent;
}
90%{
width: 100%;
border-bottom: 2px solid #e10000;
border-bottom: 2px solid #e10000;
}
}
.line2 {
left: 0;
animation: linewidth1 3s;
border-bottom: 2px solid #e10000;
width: 100%;
float: left;
height: 1px;
display: inline-block;
margin-top: 57px;
}

.single_style {
position: relative;
padding-top: 15px;
background-color: rgb(238, 238, 234);
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: cadetblue;
border-bottom-left-radius: 57px;
border-bottom-right-radius: 11px;
border-bottom-style: solid;
border-left-color: cadetblue;
border-left-style: solid;
border-right-color: cadetblue;
border-right-style: solid;
border-top-color: cadetblue;
border-top-left-radius: 170px;
border-top-right-radius: 39px;
border-top-style: solid;
border-top-width: 4px;
border-right-width: 2px;
border-left-width: 1px;
border-bottom-width: 1px;
margin-left: 20px;
margin-right: 3%;
margin-top: auto;
max-width: 1200px;
margin-bottom: 5px;
margin-top: 5px;
}
<body>
<div class="single_style" style="height:200px;">

<span class="line2"></span>

</div>
</body>

如何从 div 中隐藏红线(它的跨度)?
留边距不起作用,因为线离开了另一边。
怎么解决?

最佳答案

overflow: hidden; 添加到 .single_style

.line2 {
left: 0;
animation: linewidth1 3s;
border-bottom: 2px solid #e10000;
width: 100%;
float: left;
height: 1px;
display: inline-block;
margin-top: 57px;
}

.single_style {
position: relative;
padding-top: 15px;
background-color: rgb(238, 238, 234);
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: cadetblue;
border-bottom-left-radius: 57px;
border-bottom-right-radius: 11px;
border-bottom-style: solid;
border-left-color: cadetblue;
border-left-style: solid;
border-right-color: cadetblue;
border-right-style: solid;
border-top-color: cadetblue;
border-top-left-radius: 170px;
border-top-right-radius: 39px;
border-top-style: solid;
border-top-width: 4px;
border-right-width: 2px;
border-left-width: 1px;
border-bottom-width: 1px;
margin-left: 20px;
margin-right: 3%;
margin-top: auto;
max-width: 1200px;
margin-bottom: 5px;
margin-top: 5px;
overflow: hidden;
}
<body>
<div class="single_style" style="height:200px;">

<span class="line2"></span>

</div>
</body>

关于html - Css 隐藏 div 之外的红线(是一个跨度)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55179031/

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