边框半径(Border Radius) 通过设置border-radius,你可以控制元素的圆角效果。Tailwind CSS 提供了多种边框半径值,并允许你在不同方向上设置不同的圆角。 类名描述示例 rounded-{size}设置统一的圆角大小rounded-lg(大圆角) rounded-tl-{size}设置左上角圆角rounded-tl-sm(小圆角) ...
rounded border-radius: 0.25rem; /* 4px */ rounded-md border-radius: 0.375rem; /* 6px */ rounded-lg border-radius: 0.5rem; /* 8px */ rounded-xl border-radius: 0.75rem; /* 12px */ rounded-2xl border-radius: 1rem; /* 16px */ rounded-3xl border-radius: 1.5rem; /* 24px */...
border-x|y:横向|纵向 边框 不加value 时,默认 value 为 1px边框类型 border-solid 即 border-style: solid; border-dashed 即 border-style: dashed; border-dotted 即 border-style: dotted; border-double 即 border-style: double;弧度 rounded 即 border-radius: 0.25rem; /_ 0.25 _ 16 = 4px / rou...
border-radius: var(--radius-md);/* 0.375rem (6px) */ rounded-lg border-radius: var(--radius-lg);/* 0.5rem (8px) */ rounded-xl border-radius: var(--radius-xl);/* 0.75rem (12px) */ rounded-2xl border-radius: var(--radius-2xl);/* 1rem (16px) */ ...
border-radius:0.5rem; } .title{ font-size:1.25rem; font-weight:bold; margin-bottom:0.5rem; } .content{ font-size:1rem; color:#6b7280; } 在Tailwind CSS 中,同样的设计可以直接使用实用类实现: Hello, World! 前端充电宝 Tailwind CSS 怎么...
Tailwind CSS Border Radius 此类在顺风 CSS 中接受多个值。所有属性都以类的形式涵盖。它是CSS 边框半径属性的替代品。此类用于设置边框半径。 边界半径类: 四舍五入的无 圆润的sm 圆角 圆角-md 圆角-lg 圆角-xl 2xl 圆角 圆角3xl 四舍五入 四舍五入 ...
border-radius: 2px; color: #fff; border-color: #ff4d4f; background: #ff4d4f; text-shadow: 0 -1px 0 rgb(0 0 0 / 12%); box-shadow: 0 2px #0000000b; } 以上是最常见、最常规的写法,被称作Semantic CSS(语义化 CSS)规范。在这种规范下,追求关注点分离,让结构与样式各司其职,使结构更...
边框半径(border radius) border-redius属性用于为元素设置圆角边框,可使用border-*-radius设置四个方位的圆角。圆角的设置是通过使用半径...
borderRadius: { borderBase: '1rem', borderBig: '5rem', }, 最后,对于元素之间的间距,我们有spacing自定义全局大小比例的关键: spacing: { spaceNatural: '1rem', spaceNaturalPlus: '1.5rem', }, 因此我们的整个tailwind.config.js文件现在看起来像: ...
exports = plugin(function({ addComponents, theme }) { const buttons = { '.btn': { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: `${theme('spacing.2')} ${theme('spacing.4')}`, borderRadius: theme('borderRadius.lg'), fontWeight: theme('font...