santé mentale emplois nyc https://pilulesfrance.com/dysfonction-erectile/cialis-sur-internet/ où puis-je acheter des pilules abortives

Les bordures en CSS3

Le CSS3 améliore la propriété border afin de lui attribuer plus de fonctionnalités. En voici la liste :

NOTE : Selon le navigateur, il est nécessaire d'ajouter ou non le préfixe pour utiliser la propriété css3 : -webkit, -moz, -o.
Si c'est le cas, il sera mis dans les exemples de code ci-dessous.

border-color

Cette propriété permet de changer les couleurs des bordures

border-color:#900 transparent #900 transparent;
ou
border-color:#900 transparent;
  • border-color: top right bottom left;
  • ou border-color: top|bottom right|left;
<style type="text/css"> .border-color{ border:5px solid #eee; background-color: #fff; border-color:#900 transparent #900 transparent; width:200px; height:30px; } </style> <div class="border-color"> border-color </div>

Autres exemples

border-color:#900 transparent #990 transparent;

 

border-color:#900 #064 #990 #960;

Exemple avec border-radius

border-color:#900 #064 #990 #960;
border-radius: 50px;

Remarques

border-color ne peut être utiliser dans le raccourci border

border-image (non compatible : IE9 , compatibilité partiel : Opera, Firefox > 3.6)

La bordure peut etre dorénavant mise en forme via des images. On peut ainsi spécifier une ou des images pour chaque bordure ( top, left, bottom, right) ainsi qu'une ou des images pour les coins des bordures via les propriétés suivantes:

  • border-image:
    • border-top-image
    • border-right-image
    • border-bottom-image
    • border-left-image

En voici un exemple

Démo

le code CSS

.borderImage{ width:200px; height:30px; border: solid transparent; border-width:12px 22px; -webkit-border-image: url(../images/site/template/puceTitle.png) 12 22 round; -moz-border-image: url(../images/site/template/puceTitle.png) 12 22; border-image: url(../images/site/template/puceTitle.png) 22 round; }

la propriété round permet de répéter l'image ( tout comme la propriété repeat). Si l'on préfère étendre l'image sur la bordure, on peut utiliser la valeur stretch

Démo

le code CSS

.borderImageStretch{ width:200px; height:30px; border: solid transparent; border-width:12px 22px; -webkit-border-image: url(../images/site/template/puceTitle.png) 12 22 stretch; -moz-border-image: url(../images/site/template/puceTitle.png) 12 22; border-image: url(../images/site/template/puceTitle.png) 22 stretch; }

border-radius

permet de modifier l'arrondi des coins des bordures d'un élément

border-radius:10px;
border-radius:10px 0px;

on peut, comme montré dans l'exemple ci-dessus, appliquer l'arrondi à un seul coté.

border-radius:10px 0px 0px 0px;
.border-radius{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px; } .border-radius-test2{     -moz-border-radius:10px 0px 0px 0px;     -webkit-border-radius:10px 0px 0px 0px;     border-radius:10px 0px 0px 0px; }

box-shadow

le box-shadow permet de rajouter un ombrage à un élement. Cet ombrage est lié au border-radius. En effet, si l'élement à un ou des coins arrondis, l'ombrage sera également arrondi dans le ou les coins.

box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
border-radius: 10px;
.shadow{ -moz-box-shadow: 5px 5px 5px #000000; -webkit-box-shadow: 5px 5px 5px #000000; -o-box-shadow: 5px 5px 5px #000000; box-shadow: 5px 5px 5px #000000; }
retourner en haut de la page