Classi rotonde W3.CSS
w3-tondo-piccolo
w3-round
w3-tondo-grande
w3-tondo-xgrande
w3-round-xxlarge
Le classi w3-round- size aggiungono angoli arrotondati a qualsiasi elemento HTML:
Classe | Definisce |
---|---|
w3-round | Elemento arrotondato (raggio bordo) 4px |
w3-tondo-piccolo | Elemento arrotondato (raggio bordo) 2px |
w3-round-medio | Elemento arrotondato (raggio bordo) 4px |
w3-tondo-grande | Elemento arrotondato (raggio bordo) 8px |
w3-tondo-xgrande | Elemento arrotondato (raggio bordo) 16px |
w3-round-xxlarge | Elemento arrotondato (raggio bordo) 32px |
Esempio
<div class="w3-round w3-teal">w3-round</div>
La classe del cerchio
La classe w3-circle mostra il contenuto all'interno di un cerchio.
Un'immagine all'interno di un cerchio
Esempio
<img class="w3-circle"
src="img_car.jpg" alt="Car">
Text Inside a Circle
Text inside a circle
Example
<div class="w3-padding-32 w3-red w3-circle w3-center">
<h1>The
w3-circle Class</h1>
</div>
A Circle Inside a Circle
Hello
W3.CSS!
Example 1
<div class="w3-padding-32 w3-green w3-circle">
<img src="img_car.jpg"
class="w3-circle" style="width:75%">
</div>
Example 2
<div class="w3-padding-32 w3-green w3-circle">
<div
class="w3-padding-32 w3-red w3-circle w3-center" style="width:55%">
<p class="w3-xlarge">Hello<br>W3.CSS!</p>
</div>
</div>