设计带有圆角下划线的链接的菜单？

设计带有圆角下划线的链接的菜单可以通过CSS样式来实现。下面是一个示例的CSS代码：

.menu-link {
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  position: relative;
}

.menu-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.menu-link:hover::after {
  transform: scaleX(1);
}

这段代码定义了一个名为.menu-link的CSS类，它将应用于链接元素。通过设置display: inline-block，链接将以块级元素的方式显示，并且可以设置padding来增加链接的点击区域。border-radius属性用于设置圆角，这里设置为10px。

使用伪元素::after来创建下划线效果。通过设置position: absolute，将下划线定位到链接的底部。bottom: -2px将下划线向下偏移2px，使其与链接底部对齐。width: 100%将下划线的宽度设置为与链接相同。height: 2px定义下划线的高度。background-color属性设置下划线的颜色，这里设置为黑色。border-radius: 2px用于设置下划线的圆角，这里设置为2px。

通过设置transform: scaleX(0)将下划线的宽度缩放为0，使其初始状态下不可见。使用transition属性来实现下划线的平滑过渡效果。

在鼠标悬停时，通过设置.menu-link:hover::after的transform: scaleX(1)，将下划线的宽度缩放为1，显示出下划线效果。

这样，应用了以上CSS样式的链接元素就会呈现带有圆角下划线的菜单效果。

请注意，以上代码只是一个示例，您可以根据实际需求进行调整和修改。