unocss如何簡寫特定的邊角半徑

槑孒發表於2024-06-03
CSS

在 UnoCSS 中，可以使用簡寫類來設定各種 CSS 屬性，包括 border-bottom-left-radius。

UnoCSS 提供了一些內建的簡寫類，但是對於更詳細的控制（比如特定的邊角半徑），可能需要使用自定義類或者直接使用 CSS-in-JS 的方式。

使用 UnoCSS 設定 border-bottom-left-radius

UnoCSS 中的一些常見邊角半徑的簡寫類：

  • rounded：設定所有四個邊角的半徑。
  • rounded-t：設定頂部兩個邊角的半徑。
  • rounded-b：設定底部兩個邊角的半徑。
  • rounded-l：設定左側兩個邊角的半徑。
  • rounded-r：設定右側兩個邊角的半徑。
  • rounded-tl：設定左上角的半徑。
  • rounded-tr：設定右上角的半徑。
  • rounded-bl：設定左下角的半徑。
  • rounded-br：設定右下角的半徑。

自定義類

如果需要精確控制 border-bottom-left-radius 並且 UnoCSS 沒有內建對應的簡寫類，你可以透過自定義類來實現：

// uno.config.ts 或 uno.config.js
import { defineConfig } from 'unocss';

export default defineConfig({
  rules: [
    ['bblr-0', { 'border-bottom-left-radius': '0' }],
    ['bblr-1', { 'border-bottom-left-radius': '0.25rem' }],
    ['bblr-2', { 'border-bottom-left-radius': '0.5rem' }],
    ['bblr-3', { 'border-bottom-left-radius': '0.75rem' }],
    ['bblr-4', { 'border-bottom-left-radius': '1rem' }],
    // 根據需要新增更多規則
  ],
});

然後在你的元件中使用這些自定義類：

<div class="bblr-2"> <!-- 將 border-bottom-left-radius 設定為 0.5rem -->
  <!-- 你的內容 -->
</div>

使用自定義屬性

在某些情況下，可能會直接在元件中使用自定義屬性，而不是預定義的類：

<div style="border-bottom-left-radius: 10px;">
  <!-- 你的內容 -->
</div>

結合 UnoCSS 內建類和自定義類

可以結合使用 UnoCSS 的內建類和自定義類來實現更多樣化的設計：

<div class="rounded-tl-2xl bblr-3">
  <!-- 左上角有較大的圓角，左下角有中等的圓角 -->
  <!-- 你的內容 -->
</div>

總結

使用 UnoCSS 設定 border-bottom-left-radius 時，如果內建的簡寫類不能滿足你的需求，可以透過自定義類的方式實現。透過在 uno.config.ts 檔案中定義自定義規則，你以靈活地使用簡寫類來控制特定的邊角半徑。

相關文章