Ombre e angoli
Angoli
I bordi arrotondati si ottengono tramite le classi border e rounded.
Sono previsti tre tipi di arrotondamento, piccolo medio e grande.
BORDER RADIUS-2PX
BORDER RADIUS-4PX
BORDER RADIUS-8PX
<div class="border border-dark rounded-sm p-3 mb-3">BORDER RADIUS-2PX</div>
<div class="border border-dark rounded p-3 mb-3">BORDER RADIUS-4PX</div>
<div class="border border-dark rounded-lg p-3 mb-3">BORDER RADIUS-8PX</div>Ombre
Le classi per la generazione di ombre sono 3 oltre a quella per l’eliminazione dell’ombra ad un componente che la erediti:
shadow-sm
shadow
shadow-lg
shadow-none
<div class="shadow-sm p-3 mb-5">shadow-sm</div>
<div class="shadow p-3 mb-5">shadow</div>
<div class="shadow-lg p-3 mb-5">shadow-lg</div>
<div class="shadow-none p-3 mb-5 border">shadow-none</div>I valori corrispondenti sono i seguenti:
$box-shadow-sm: 1px 1px 2px rgba(50, 50, 50, 0.35) !default;
$box-shadow: 1px 4px 8px 0 rgba(50, 50, 50, 0.15) !default;
$box-shadow-lg: 1px 8px 24px 1px rgba( 0, 0, 0, 0.35) !default;Riferimenti
Il contenuto di questa pagina si riferisce ai seguenti punti della Documentazione Tecnica: