border.md 3.3 KB

Bordure

Nous normalisons l'apparence des bordures qui peuvent être utilisées pour les boutons, les cartes, les pop-ups et d'autres composants.

Bordure

Il y a plusieurs styles de bordure que vous pouvez choisir.

Nom Épaisseur Demo
Solid 1px
Dashed 2px

Radius

Il y a plusieurs styles de radius que vous pouvez choisir.

<div class="title">Pas de radius</div>
<div class="value">border-radius: 0px</div>
<div class="radius"></div>

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

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

<div class="title">Radius rond</div>
<div class="value">border-radius: 30px</div>
<div class="radius radius-30"></div>

Ombres

Il y a plusieurs styles d'ombres que vous pouvez choisir.

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

Ombre de base, box-shadow: {{boxShadowBase}}

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

Ombre légère, box-shadow: {{boxShadowLight}}