圆角半径

设置元素边角半径大小。

基础用法

  • 使用.vus-radius-(0~10)类,添加或移除圆角半径。
  • 使用.vus-radius-large设置大圆角。(border-radius: 200px)
  • 使用.vus-radius-circle设置成圆形或椭圆。(border-radius: 50%)
用于元素
vus-radius-1
vus-radius-2
vus-radius-3
vus-radius-4
vus-radius-5
vus-radius-6
vus-radius-7
vus-radius-8
vus-radius-9
vus-radius-10
vus-radius-large
vus-radius-circle
用于图片
  • vus-radius-5

  • vus-radius-10

  • vus-radius-large

  • vus-radius-circle

<div class="vus-radius-0">vus-radius-0</div>
<div class="vus-radius-1">vus-radius-1</div>
<div class="vus-radius-2">vus-radius-2</div>
<div class="vus-radius-3">vus-radius-3</div>
<div class="vus-radius-4">vus-radius-4</div>
<div class="vus-radius-5">vus-radius-5</div>
<div class="vus-radius-6">vus-radius-6</div>
<div class="vus-radius-7">vus-radius-7</div>
<div class="vus-radius-8">vus-radius-8</div>
<div class="vus-radius-9">vus-radius-9</div>
<div class="vus-radius-10">vus-radius-10</div>
<div class="vus-radius-large">vus-radius-large</div>
<div class="vus-radius-circle">vus-radius-circle</div>

单边圆角

  • 添加或移除某个边角半径。
  • .vus-radius-lt-(0~10):左上角半径。
  • .vus-radius-rt-(0~10):右上角半径。
  • .vus-radius-rb-(0~10):右下角半径。
  • .vus-radius-lb-(0~10):左下角半径。
  • .vus-radius-(lt/rt/rb/lb)-(large/circle):大圆角、圆形或椭圆。
用于元素
vus-radius-lt-10
vus-radius-rt-10
vus-radius-rb-10
vus-radius-lb-10
vus-radius-lt-large
vus-radius-rt-large
vus-radius-rb-large
vus-radius-lb-large
vus-radius-lt-circle
vus-radius-rt-circle
vus-radius-rb-circle
vus-radius-lb-circle
用于图片
  • vus-radius-lt-10

  • vus-radius-rt-10

  • vus-radius-lb-large

  • vus-radius-rb-circle

<div class="vus-radius-lt-1">vus-radius-lt-1</div>
<div class="vus-radius-rt-4">vus-radius-rt-4</div>
<div class="vus-radius-rb-6">vus-radius-rb-6</div>
<div class="vus-radius-lb-10">vus-radius-lb-10</div>
<div class="vus-radius-lt-large">vus-radius-lt-large</div>
<div class="vus-radius-rb-circle">vus-radius-rb-circle</div>

响应式半径

预设了四个响应尺寸:

分辨率≥576px≥768px≥1024px≥1280px
vus-radius.vus-radius-xs-*.vus-radius-sm-*.vus-radius-md-*.vus-radius-lg-*
.vus-radius-(lt/rt/rb/lb)-*.vus-radius-(lt/rt/rb/lb)-xs-*.vus-radius-(lt/rt/rb/lb)-sm-*.vus-radius-(lt/rt/rb/lb)-md-*.vus-radius-(lt/rt/rb/lb)-lg-*
<!-- vus-radius -->
<div class="vus-radius-xs-1"></div>
<div class="vus-radius-sm-2"></div>
<div class="vus-radius-md-3"></div>
<div class="vus-radius-lg-circle"></div>

<!-- vus-radius-(lt/rt/rb/lb) -->
<div class="vus-radius-(lt/rt/rb/lb)-xs-1"></div>
<div class="vus-radius-(lt/rt/rb/lb)-sm-2"></div>
<div class="vus-radius-(lt/rt/rb/lb)-md-3"></div>
<div class="vus-radius-(lt/rt/rb/lb)-lg-circle"></div>