Tailwind CSS 邊框圓角

邊框圓角

用于控制元素邊框半徑的功能類。

圓角

使用 ?.rounded-sm?, ?.rounded?, 或 ?.rounded-lg? 等實用功能類來應(yīng)用不同的邊框半徑大小到一個元素上。

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

藥丸形和圓圈

使用 ?rounded-full? 功能類來創(chuàng)建藥丸形和圓圈。

<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? 從元素中刪除現(xiàn)有的邊框半徑。

這最常見的是用來刪除一個應(yīng)用在較小斷點上的邊框半徑。

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

獨立設(shè)置每條邊框的圓角效果

使用 ?rounded-{t|r|b|l}{-size?}? 只對元素的一側(cè)進(jìn)行圓角處理。

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

獨立設(shè)置每個邊角的圓角效果

使用 ?rounded-{tl|tr|br|bl}{-size?}? 只將圓角應(yīng)用到元素的一個邊角上。

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

響應(yīng)式

要在特定的斷點處控制元素的邊界半徑，請在任何現(xiàn)有的邊界半徑功能類中添加 ?{screen}:? 前綴。例如，使用 ?md:rounded-lg? 來應(yīng)用 ?rounded-lg? 功能類，只適用于中等尺寸以上的屏幕。

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

關(guān)于 Tailwind 的響應(yīng)式設(shè)計功能的更多信息，請查看響應(yīng)式設(shè)計文檔。

自定義

邊框半徑

默認(rèn)情況下，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',
      }
    }
  }

變體

默認(rèn)情況下， 針對 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 ?屬性設(shè)置為 ?false ?來完全禁用它們：

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