element-ui/examples/docs/zh-CN/border.md

Border 边框

我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。

边框

我们提供了一下几种边框样式，以供选择。

名称	粗细	举例
实线	1px
虚线	2px

圆角

我们提供了一下几种圆角样式，以供选择。

<div class="title">无圆角</div>
<div class="value">border-radius: 0px</div>
<div class="radius"></div>

<div class="title">小圆角</div>
<div class="value">border-radius: {{borderRadiusSmall}}</div>
<div 
  class="radius" 
  :style="{ borderRadius: borderRadiusSmall }"
></div>

<div class="title">大圆角</div>
<div class="value">border-radius: {{borderRadiusBase}}</div>
<div 
  class="radius"
  :style="{ borderRadius: borderRadiusBase }"
></div>

<div class="title">圆形圆角</div>
<div class="value">border-radius: 30px</div>
<div class="radius radius-30"></div>

投影

我们提供了一下几种投影样式，以供选择。

<div class="demo-shadow" :style="{ boxShadow: boxShadowBase }"

基础投影 box-shadow: {{boxShadowBase}}

<div class="demo-shadow" :style="{ boxShadow: boxShadowLight }"

浅色投影 box-shadow: {{boxShadowLight}}