TPower DesignAppearance
圆角
用于控制元素边框半径的工具。
| Class | 属性Properties |
|---|---|
| rounded-radius-none | border-radius: 0px; |
| rounded-radius-sm | border-radius: 2px; |
rounded-radius-regular 默认 | border-radius: 4px; |
| rounded-radius-md | border-radius: 6px; |
| rounded-radius-lg | border-radius: 8px; |
| rounded-radius-xl | border-radius: 10px; |
| rounded-radius-circle | border-radius: 50%; |
| rounded-radius-full | border-radius: 999px; |
| rounded-s-radius-sm | border-start-start-radius: 2px; border-end-start-radius: 2px; |
| rounded-s-radius-regular | border-start-start-radius: 4px; border-end-start-radius: 4px; |
| rounded-s-radius-md | border-start-start-radius: 6px; border-end-start-radius: 6px; |
| rounded-s-radius-lg | border-start-start-radius: 8px; border-end-start-radius: 8px; |
| rounded-s-radius-xl | border-start-start-radius: 10px; border-end-start-radius: 10px; |
| rounded-s-radius-full | border-start-start-radius: 999px; border-end-start-radius: 999px; |
| rounded-e-radius-sm | border-start-end-radius: 2px; border-end-end-radius: 2px; |
| rounded-e-radius-regular | border-start-end-radius: 4px; border-end-end-radius: 4px; |
| rounded-e-radius-md | border-start-end-radius: 6px; border-end-end-radius: 6px; |
| rounded-e-radius-lg | border-start-end-radius: 8px; border-end-end-radius: 8px; |
| rounded-e-radius-xl | border-start-end-radius: 10px; border-end-end-radius: 10px; |
| rounded-e-radius-full | border-start-end-radius: 999px; border-end-end-radius: 999px; |
| rounded-t-radius-sm | border-top-left-radius: 2px; border-top-right-radius: 2px; |
| rounded-t-radius-regular | border-top-left-radius: 4px; border-top-right-radius: 4px; |
| rounded-t-radius-md | border-top-left-radius: 6px; border-top-right-radius: 6px; |
| rounded-t-radius-lg | border-top-left-radius: 8px; border-top-right-radius: 8px; |
| rounded-t-radius-xl | border-top-left-radius: 10px; border-top-right-radius: 10px; |
| rounded-t-radius-full | border-top-left-radius: 999px; border-top-right-radius: 999px; |
| rounded-b-radius-sm | border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; |
| rounded-b-radius-regular | border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; |
| rounded-b-radius-md | border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; |
| rounded-b-radius-lg | border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; |
| rounded-b-radius-xl | border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; |
| rounded-b-radius-full | border-bottom-left-radius: 999px; border-bottom-right-radius: 999px; |
| rounded-l-radius-sm | border-top-left-radius: 2px; border-bottom-left-radius: 2px; |
| rounded-l-radius-regular | border-top-left-radius: 4px; border-bottom-left-radius: 4px; |
| rounded-l-radius-md | border-top-left-radius: 6px; border-bottom-left-radius: 6px; |
| rounded-l-radius-lg | border-top-left-radius: 8px; border-bottom-left-radius: 8px; |
| rounded-l-radius-xl | border-top-left-radius: 10px; border-bottom-left-radius: 10px; |
| rounded-l-radius-full | border-top-left-radius: 999px; border-bottom-left-radius: 999px; |
| rounded-r-radius-sm | border-top-right-radius: 2px; border-bottom-right-radius: 2px; |
| rounded-r-radius-regular | border-top-right-radius: 4px; border-bottom-right-radius: 4px; |
| rounded-r-radius-md | border-top-right-radius: 6px; border-bottom-right-radius: 6px; |
| rounded-r-radius-lg | border-top-right-radius: 8px; border-bottom-right-radius: 8px; |
| rounded-r-radius-xl | border-top-right-radius: 10px; border-bottom-right-radius: 10px; |
| rounded-r-radius-full | border-top-right-radius: 999px; border-bottom-right-radius: 999px; |
| rounded-ss-radius-sm | border-start-start-radius: 2px; |
| rounded-ss-radius-regular | border-start-start-radius: 4px; |
| rounded-ss-radius-md | border-start-start-radius: 6px; |
| rounded-ss-radius-lg | border-start-start-radius: 8px; |
| rounded-ss-radius-xl | border-start-start-radius: 10px; |
| rounded-ss-radius-full | border-start-start-radius: 999px; |
| rounded-se-radius-sm | border-start-end-radius: 2px; |
| rounded-se-radius-regular | border-start-end-radius: 4px; |
| rounded-se-radius-md | border-start-end-radius: 6px; |
| rounded-se-radius-lg | border-start-end-radius: 8px; |
| rounded-se-radius-xl | border-start-end-radius: 10px; |
| rounded-se-radius-full | border-start-end-radius: 999px; |
| rounded-es-radius-sm | border-end-start-radius: 2px; |
| rounded-es-radius-regular | border-end-start-radius: 4px; |
| rounded-es-radius-md | border-end-start-radius: 6px; |
| rounded-es-radius-lg | border-end-start-radius: 8px; |
| rounded-es-radius-xl | border-end-start-radius: 10px; |
| rounded-es-radius-full | border-end-start-radius: 999px; |
| rounded-ee-radius-sm | border-end-end-radius: 2px; |
| rounded-ee-radius-regular | border-end-end-radius: 4px; |
| rounded-ee-radius-md | border-end-end-radius: 6px; |
| rounded-ee-radius-lg | border-end-end-radius: 8px; |
| rounded-ee-radius-xl | border-end-end-radius: 10px; |
| rounded-ee-radius-full | border-end-end-radius: 999px; |
| rounded-tl-radius-sm | border-top-left-radius: 2px; |
| rounded-tl-radius-regular | border-top-left-radius: 4px; |
| rounded-tl-radius-md | border-top-left-radius: 6px; |
| rounded-tl-radius-lg | border-top-left-radius: 8px; |
| rounded-tl-radius-xl | border-top-left-radius: 10px; |
| rounded-tl-radius-full | border-top-left-radius: 999px; |
| rounded-tr-radius-sm | border-top-right-radius: 2px; |
| rounded-tr-radius-regular | border-top-right-radius: 4px; |
| rounded-tr-radius-md | border-top-right-radius: 6px; |
| rounded-tr-radius-lg | border-top-right-radius: 8px; |
| rounded-tr-radius-xl | border-top-right-radius: 10px; |
| rounded-tr-radius-full | border-top-right-radius: 999px; |
| rounded-bl-radius-sm | border-bottom-left-radius: 2px; |
| rounded-bl-radius-regular | border-bottom-left-radius: 4px; |
| rounded-bl-radius-md | border-bottom-left-radius: 6px; |
| rounded-bl-radius-lg | border-bottom-left-radius: 8px; |
| rounded-bl-radius-xl | border-bottom-left-radius: 10px; |
| rounded-bl-radius-full | border-bottom-left-radius: 999px; |
| rounded-br-radius-sm | border-bottom-right-radius: 2px; |
| rounded-br-radius-regular | border-bottom-right-radius: 4px; |
| rounded-br-radius-md | border-bottom-right-radius: 6px; |
| rounded-br-radius-lg | border-bottom-right-radius: 8px; |
| rounded-br-radius-xl | border-bottom-right-radius: 10px; |
| rounded-br-radius-full | border-bottom-right-radius: 999px; |
基本示例
使用 rounded-* 工具将不同大小的圆角应用于元素。
rounded-radius-regular
rounded-radius-md
rounded-radius-lg
rounded-radius-full
html
<div class="rounded-radius-regular ..."></div>
<div class="rounded-radius-md ..."></div>
<div class="rounded-radius-lg ..."></div>
<div class="rounded-radius-full ..."></div>
分别圆边
使用 rounded-t-*、rounded-r-*、rounded-b-* 和 rounded-l-* 工具仅舍入元素的一侧。
rounded-t-radius-lg
rounded-r-radius-lg
rounded-b-radius-lg
rounded-l-radius-lg
html
<div class="rounded-t-radius-lg ..."></div>
<div class="rounded-r-radius-lg ..."></div>
<div class="rounded-b-radius-lg ..."></div>
<div class="rounded-l-radius-lg ..."></div>
分别圆角
使用 rounded-tl-*、rounded-tr-*、rounded-br-* 和 rounded-bl-* 工具仅圆化元素的一个角。
rounded-tl-radius-lg
rounded-tr-radius-lg
rounded-br-radius-lg
rounded-bl-radius-lg
html
<div class="rounded-tl-radius-lg ..."></div>
<div class="rounded-tr-radius-lg ..."></div>
<div class="rounded-br-radius-lg ..."></div>
<div class="rounded-bl-radius-lg ..."></div>
使用逻辑属性
使用 rounded-s-*、 rounded-e-*、rounded-ss-*、rounded-se-*、rounded-es-* 和 rounded-ee-* 工具使用 逻辑属性 设置边框半径，该半径根据文本方向映射到相应的角。
Left-to-right
Right-to-left
html
<div dir="ltr">
<div class="rounded-s-radius-lg ..."></div>
</div>
<div dir="rtl">
<div class="rounded-s-radius-lg ..."></div>
</div>