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

问题描述

我正在将2px的底部边框应用于容器上具有4px角半径的文本字段.由于半径大于边界，因此会导致边界在边缘周围卷曲.我希望边框沿底部边缘保持平坦.

I'm applying a 2px bottom border to a text field with a 4px corner radius on the container. Since the radius is larger than the border, it causes the border to curl around the edge. I want the border to stay flat along the bottom edge.

[不希望这样:边框包裹边框半径] https://imgur.com/JEfIkDE

[DON'T want this: border wrapping border radius] https://imgur.com/JEfIkDE

[不要这样:底部边框保持笔直] https://imgur.com/xkuQGME

[DO want this: bottom border remains straight]https://imgur.com/xkuQGME

我还没有找到在CSS中解决此问题的方法.我是否需要在容器内放置另一个div才能进行此工作?基本上在容器底部有2px高的盒子?如果是这样，我将不胜感激，以帮助其结构化.

I haven't found a way to fix this within the CSS. Will I have to place another div inside the container to make this work? Basically a 2px high box at the bottom of the container? If so, I would appreciate any help on how that would be structured.

.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>

如果只需要视觉效果，则可以省略边框

If you simply want the visual you can omit the border

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

<div class="box"></div>

这篇关于如何防止单面边框环绕边框半径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！