css 如何在元素的底部设置圆形边框？

20jt8wwn 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(199)

我正在构建这个主导航栏，作为活动/悬停状态，我需要得到颜色的边界底部。我的问题是我如何才能圆内顶角？我知道我可以创建一个元素，添加高度，宽度，bg颜色和圆它与border-radius，但我想知道是否有可能使这与border-bottom。
我附上了设计图，这样你就能明白我的意思了。谢谢
enter image description here

css

来源：https://stackoverflow.com/questions/76511637/how-to-rounded-border-bottom-of-an-element

2条答案

按热度按时间

bqujaahr1#

最简单的方法是使用一个伪元素，如::after，并给予它一个特定的高度。然后使用borer-top-left-radius和border-top-right-radius以相等的高度值圆角：

const ANCHORS = document.querySelectorAll('menu a');

ANCHORS.forEach(anchor => 
  anchor.addEventListener('click', function(element) {
    document.querySelector('.active').classList.remove('active');
    element.target.classList.add('active');
  }) 
)

a {
  position: relative;
  display: block;
  padding: 2em 0.5em;
  text-decoration: none;
}

a:hover::after,
a.active::after {
  --block-thickness: 0.5em;
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--block-thickness);
  background-color: blue;
  border-top-left-radius: var(--block-thickness);
  border-top-right-radius: var(--block-thickness);
}

/* styling for the navbar */
menu {
  list-style: none;
  display: flex;
  gap: 1em;
}

<menu>
  <li><a href="#link" class="active">Link 1</a></li>
  <li><a href="#link">Link 2</a></li>
  <li><a href="#link">Link 3</a></li>
  <li><a href="#link">Link 4</a></li>
</menu>

编辑：要使边框只在悬停时显示，可以在使用::after伪选择器之前使用:hover伪选择器。活动状态只能通过JS解决，并且需要使用添加和删除类。

赞(0）回复(0）举报 2023-06-25

o7jaxewo2#

最简单的方法是使用Tailwind CSS。在VS CODE的终端中运行以下代码。
code link that is to be run in the terminal
这样你就可以使用TAILWIND CSS了。
记住：-代码片段将不工作，直到代码在提供的图像运行在终端的VS代码。

使元素底部圆角的主要代码*border-2 rounded-b-lg

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/input.css">
  <title>Document</title>
</head>

<body>
  <nav class=" bg-gray-400 h-10 ">
    <ul class="flex space-x-4 mx-4">
      <li class=" hover:border-2 rounded-b-lg border-b-green-500 border-purple-700">Home</li>
      <li class=" ">Help</li>
      <li class=" ">Contact</li>
    </ul>
  </nav>
</body>

</html>

赞(0）回复(0）举报 2023-06-25

我来回答

css 如何在元素的底部设置圆形边框？

2条答案

相关问题

热门标签

最新问答