Tailwind CSS 边框圆角

边框圆角

用于控制元素边框半径的功能类。

圆角

使用 ​.rounded-sm​, ​.rounded​, 或 ​.rounded-lg​ 等实用功能类来应用不同的边框半径大小到一个元素上。

<div class="rounded-sm ..."></div>
<div class="rounded ..."></div>
<div class="rounded-md ..."></div>
<div class="rounded-lg ..."></div>

药丸形和圆圈

使用 ​rounded-full​ 功能类来创建药丸形和圆圈。

<div class="rounded-full py-3 px-6...">Pill Shape</div>
<div class="rounded-full h-24 w-24 flex items-center justify-center...">Circle</div>

无圆角

使用 ​rounded-none​ 从元素中删除现有的边框半径。

这最常见的是用来删除一个应用在较小断点上的边框半径。

<div class="rounded-none ...">.rounded-none</div>

独立设置每条边框的圆角效果

使用 ​rounded-{t|r|b|l}{-size?}​ 只对元素的一侧进行圆角处理。

<div class="rounded-t-lg ...">.rounded-t-lg</div>
<div class="rounded-r-lg ...">.rounded-r-lg</div>
<div class="rounded-b-lg ...">.rounded-b-lg</div>
<div class="rounded-l-lg ...">.rounded-l-lg</div>

独立设置每个边角的圆角效果

使用 ​rounded-{tl|tr|br|bl}{-size?}​ 只将圆角应用到元素的一个边角上。

<div class="rounded-tl-lg ..."></div>
<div class="rounded-tr-lg ..."></div>
<div class="rounded-br-lg ..."></div>
<div class="rounded-bl-lg ..."></div>

响应式

要在特定的断点处控制元素的边界半径，请在任何现有的边界半径功能类中添加 ​{screen}:​ 前缀。例如，使用 ​md:rounded-lg​ 来应用 ​rounded-lg​ 功能类，只适用于中等尺寸以上的屏幕。

<div class="rounded md:rounded-lg ...">
  <!-- ... -->
</div>

关于 Tailwind 的响应式设计功能的更多信息，请查看响应式设计文档。

自定义

边框半径

默认情况下，Tailwind 提供了五个边框半径大小的实用工具。你可以通过编辑你的 Tailwind 配置中的​theme.borderRadius​部分来改变、添加或删除这些。

  // tailwind.config.js
  module.exports = {
    theme: {
      borderRadius: {
        'none': '0',
       'sm': '0.125rem',
       DEFAULT: '0.25rem',
       DEFAULT: '4px',
       'md': '0.375rem',
       'lg': '0.5rem',
       'full': '9999px',
       'large': '12px',
      }
    }
  }

变体

默认情况下， 针对 border radius 功能类，只生成 responsive 变体。

您可以通过修改您的 ​tailwind.config.js​ 文件中的 ​variants ​部分中的 ​borderRadius ​属性来控制为 border radius 功能生成哪些变体。

例如，这个配置也将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       borderRadius: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 border radius 功能，您可以通过在配置文件的 ​corePlugins ​部分将 ​borderRadius ​属性设置为 ​false ​来完全禁用它们：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     borderRadius: false,
    }
  }