gpt4 book ai didi

css - 如何防止单边边框环绕边框半径?

转载 作者:行者123 更新时间:2023-11-28 14:06:39 25 4
gpt4 key购买 nike

我将 2px 底部边框应用到容器上具有 4px Angular 半径的文本字段。由于半径大于边界,它导致边界围绕边缘 curl 。我希望边框沿底部边缘保持平坦。

[不要这样:边框环绕边框半径] https://imgur.com/JEfIkDE

[确实想要这个:底部边框保持笔直] https://imgur.com/xkuQGME

我还没有找到在 CSS 中修复此问题的方法。我是否必须在容器内放置另一个 div 才能使其工作?基本上容器底部有一个 2px 高的盒子?如果是这样,我将不胜感激任何关于如何构建它的帮助。

.textfield {
border-bottom: 2px solid #1A1446;
border-radius: 4px;
}

最佳答案

在底部使用渐变:

.box {
width:200px;
height:100px;
border-bottom:5px solid transparent; /*keep it transparent*/
background:
linear-gradient(#1A1446,#1A1446) bottom/100% 5px border-box no-repeat,
yellow;
border-radius: 10px;
}
<div class="box"></div>

如果你只是想要视觉效果,你可以省略边框

.box {
width:200px;
height:100px;
background:
linear-gradient(#1A1446,#1A1446) bottom/100% 5px no-repeat,
yellow;
border-radius: 10px;
}
<div class="box"></div>

关于css - 如何防止单边边框环绕边框半径?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57153309/

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