« Le langage CSS/Le modèle de boîte » : différence entre les versions

<div style="border: 1px solid; box-shadow: 10px 10px 0px black; -webkit-box-shadow: 10px 10px 0px black; -moz-box-shadow: 10px 10px 0px black; padding: 0.5em;">

Cette boite affiche une ombre rectangulaire en bas à droite.

div {

border: 1px solid;

padding: 0.5em;

}

</div>

 

<div style="border: 1px solid; box-shadow: 10px 10px 0px black; -webkit-box-shadow: 10px 10px 0px black; -moz-box-shadow: 10px 10px 0px black; padding: 0.5em; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;">

Cette boite affiche une ombre arrondie en bas à droite.

div {

border: 1px solid;

-moz-border-radius: 10px;

}

</div>

 

<div style="border: 1px solid; box-shadow: -10px -10px 5px red; -webkit-box-shadow: -10px -10px 5px red; -moz-box-shadow: -10px -10px 5px red; padding: 0.5em; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;">

Cette boite affiche une ombre diffuse en rouge en haut à gauche.

div {

border: 1px solid;

-moz-border-radius: 10px;

}

</div>

 

<div style="border: 1px solid; box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue; -webkit-box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue; -moz-box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue; padding: 0.5em; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; margin-right: 2em;">

Cette boite affiche une ombre diffuse en rouge, vert et bleu, en bas à droite.

div {

border: 1px solid;

-moz-border-radius: 10px;

}

</div>

 

 

=== Exemple ===

div.bigbox {

width: 40em;

float: left;

}

 

<div class="bigbox">

<div class="littlebox" style="border-color: green;">Boite de gauche.</div>

<div class="littlebox" style="border-color: blue;">Boite de droite.</div>

</div>

 

Rendu :