Voir entete

Voici les nouvelles propriétés que j'apporte à la propriété border d'un DIV par exemple,pour les bords arrondis. C'est très simple, et ce sont des propriétés en plus!

round: 10% ,veut dire qu'il y a une bordure qui s'arrondi à 10% par rapport à la moitié de chaque coté. On peut utilisé bien sur 10px alors l'arrondi fait 10px. Si round: 0% alors c'est un rectangle et si round: 100% c'est un cercle!

Pour réaliser une elipse, round-width et round-height doivent être différent c'est tout.c'est une sous propriété de round !

Pour corsé l'affaire, on peut y mettre 4 coins différents. Si les coins sont identiques cela revient à faire ci-dessus. Donc, on a:

round-top-left, round-top-right, round-bottom-left et round-bottom-right qui selon les cas forme une élipse,ou on peut avoir deux arrondi en diagonale et les deux autres il y a pas d'arrondi ou un truc arrondi si les valeur ne sont pas identiques.

border-top-left, border-top-right, border-bottom-left et border-bottom-right qui selon les cas,ou on peut avoir jusqu'à 4 largeurs de bordure(épaisseur de border) franches si les valeurs ne sont pas identiques.

Et, round-top-left-width, round-top-right-width, round-bottom-left-width et round-bottom-left-width(et pour la hauteur correspondant à l'arrondi:round-top-left-height, round-top-right-height, round-bottom-left-height et round-bottom-left-height) qui selon les cas forme un truc vraiment arrondi si les valeurs ne sont pas identiques.

border-color-top-left, border-color-top-right, border-color-bottom-left et border-color-bottom-right qui selon les cas,peuvent jusqu'à 4 morceaux différents en couleur. Bien-sûr, il vaut mieux éviter de les préciser si c'est qu'une couleur et utiliser border-color!

corner(si les 4 cotés sont pareils),corner-top-left, corner-top-right, corner-bottom-left et corner-bottom-right qui selon les cas, peuvent jusqu'à 4 types de coins différents. J'en connais que quelques-uns:
circle (par defaut),curve (cercle vers l'intérieur, pour faire des étiquettes par exemple) et line (c'est un trait en biais).

J'ajouterais que l'on peut faire de border une bulle avec bulle-top-left, bulle-top-right, bulle-bottom-left et bulle-bottom-right qui selon les cas, peuvent jusqu'à 4 morceaux de flèches(ou exenticités vers le personnage).

Par ailleurs, border-offset:25% pivote l'élément (div,button,etc...) de 90% par rapport à l'horizontal. Il n'y a pas de  négatif mais si > 50% revient à le faire à l'envers(parenthèses mise à part!). Ou offset:25% pour toute la DIV !

Fermer

Le texte est modifiable, si vous ne voulez imprimer qu'une partie ou ajouter des commentaires avant l'impression

Imprimer