如果顺风DaisyUi按钮组只有一个按钮或Angular中有动态按钮，如何设置第一个按钮半径

Question

我使用顺风 CSS 并使用动态元素在分组视图中渲染按钮，如果它有多个按钮，则设计看起来很好，第一个和最后一个按钮边框是弯曲的，如下所示。

<div class="join">
 <button class="btn join-item bg-black">Button</button>
 <button class="btn join-item bg-black">Button</button>
 <button class="btn join-item bg-black">Button</button>
</div>

游乐场：https://play.tailwindcss.com/enF3BnmYH3

代码参考：https://daisyui.com/components/join/

但是当组中只有一个按钮时，左侧不是弯曲的。

<div class="join">
 <button class="btn join-item bg-black">Button</button>
</div>

Answer 1

在您的组件 CSS 中使用以下代码

.join .join-item:last-child:not(:first-child), 
.join *:last-child:not(:first-child) .join-item {
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
}