Radius 圆角半径
基础用法
使用 vus-radius-(0~20) 类，添加或移除圆角半径。
vus-radius-2
vus-radius-5
vus-radius-10
<div class="vus-radius-1"></div>
<div class="vus-radius-5"></div>
<div class="vus-radius-20"></div>
指定位置
指定圆角位置，可随意多个混合。
| 样式名称 | 描述 |
|---|---|
| vus-radius-tl-(0~20) | border-top-left-radius (左上角圆角) |
| vus-radius-tr-(0~20) | border-top-right-radius (右上角圆角) |
| vus-radius-bl-(0~20) | border-bottom-left-radius (左下角圆角) |
| vus-radius-br-(0~20) | border-bottom-right-radius (右下角圆角) |
vus-radius-tl-10
vus-radius-tr-10
vus-radius-bl-10
vus-radius-br-10
vus-radius-br-10 vus-radius-tl-5
<div class="vus-radius-tl-10"></div>
<div class="vus-radius-br-10"></div>
<div class="vus-radius-tl-10 vus-radius-tr-10 vus-radius-br-10"></div>
其它用法
| 样式名称 | 描述 |
|---|---|
| vus-radius-circle | { border-radius: 50%; } 圆形 |
| vus-radius-large | { border-radius: 125rem; } 大圆角 |
| vus-radius-tl-circle | { border-top-left-radius: 50%; } 左上角 50% |
| vus-radius-tl-large | { border-top-left-radius: 125rem; } 左上角大圆角 |
| vus-radius-tr-circle | { border-top-right-radius: 50%; } 右上角 50% |
| vus-radius-tr-large | { border-top-right-radius: 125rem; } 右上角大圆角 |
| vus-radius-bl-circle | { border-bottom-left-radius: 50%; } 左下角 50% |
| vus-radius-bl-large | { border-bottom-left-radius: 125rem; } 左下角大圆角 |
| vus-radius-br-circle | { border-bottom-right-radius: 50%; } 右下角 50% |
| vus-radius-br-large | { border-bottom-right-radius: 125rem; } 右下角大圆角 |
<div class="vus-radius-circle"></div>
<div class="vus-radius-large"></div>
<div class="vus-radius-tl-circle"></div>
<div class="vus-radius-tl-large"></div>
<div class="vus-radius-tr-circle"></div>
<div class="vus-radius-tr-large"></div>
<div class="vus-radius-bl-circle"></div>
<div class="vus-radius-bl-large"></div>
<div class="vus-radius-br-circle"></div>
<div class="vus-radius-br-large"></div>
响应式方案
响应式预设了四个响应尺寸：
| 分辨率 | ≥567px | ≥768px | ≥1024px | ≥1280px |
|---|---|---|---|---|
| 基础 | vus-radius-xs-* | vus-radius-sm-* | vus-radius-md-* | vus-radius-lg-* |
| 左上角 | vus-radius-tl-xs-* | vus-radius-tl-sm-* | vus-radius-tl-md-* | vus-radius-tl-lg-* |
| 右上角 | vus-radius-tr-xs-* | vus-radius-tr-sm-* | vus-radius-tr-md-* | vus-radius-tr-lg-* |
| 左下角 | vus-radius-bl-xs-* | vus-radius-bl-sm-* | vus-radius-bl-md-* | vus-radius-bl-lg-* |
| 右下角 | vus-radius-br-xs-* | vus-radius-br-sm-* | vus-radius-br-md-* | vus-radius-br-lg-* |
<div
class="vus-radius-1 vus-radius-xs-2 vus-radius-sm-3 vus-radius-md-4 vus-radius-lg-5"
></div>
<div
class="vus-radius-tl-1 vus-radius-tl-xs-2 vus-radius-tl-sm-3 vus-radius-tl-md-4 vus-radius-tl-lg-5"
></div>
<div
class="vus-radius-br-1 vus-radius-br-xs-2 vus-radius-br-sm-3 vus-radius-br-md-4 vus-radius-br-lg-5"
></div>