Définition et utilisation de la propriété CSS border-bottom-left-radius
La propriété CSS border-bottom-left-radius permet de définir le rayon de la bordure inférieure gauche d'un élément. Cela signifie qu'elle permet de créer un arrondi sur la bordure inférieure gauche de l'élément.Pour utiliser cette propriété, il suffit de l'ajouter à l'élément concerné dans les règles de style CSS. Par exemple, pour ajouter un arrondi de 5 pixels sur la bordure inférieure gauche d'un élément ayant la classe "ma-classe", on écrirait :
.ma-classe {
border-bottom-left-radius: 5px;
}Il est également possible de définir des rayons différents pour les coins horizontaux et verticaux de l'élément en utilisant deux valeurs séparées par un espace. Par exemple :
.ma-classe {
border-bottom-left-radius: 10px 5px;
}Cela créerait un arrondi de 10 pixels de rayon sur l'axe horizontal et de 5 pixels de rayon sur l'axe vertical de la bordure inférieure gauche de l'élément.
Il est important de noter que cette propriété n'est disponible que dans les navigateurs qui prennent en charge les règles de style CSS3. Si vous souhaitez garantir une compatibilité avec les navigateurs plus anciens, vous devrez peut-être utiliser des propriétés de bordure alternatives ou des techniques de dégradé pour créer des arrondis sur les bordures de vos éléments.
Astuce : la propriété border-bottom-left-radius doit être utilisé en conjonction avec la propriété border (ou une autre propriété qui définit des frontières) afin d’obtenir la frontière réelle.!
| Valeur par défaut : | 0 |
| Héritée : | no |
| Animer : | Oui. |
| Version: | CSS3 |
| Syntaxe JavaScript : | objet.style.borderBottomLeftRadius="25px" |
Syntaxe CSS de la propriété CSS border-bottom-left-radius
border-bottom-left-radius: valeur1 valeur2|initial|inherit;
Remarque : Les deux valeurs peuvent être des nombres ou des
pourcentages qui définissent les rayons horizontal et vertical du
quart de l'ellipse qui définit la forme du coin de la bordure de la
frontière extérieure d’un élément. La première valeur est le rayon
horizontal, le second le rayon vertical. Si la deuxième valeur n’est
pas fournie elle sera donnée égale à la première. Si chaque les deux
sont nulles, le coin est carré, et n’est pas arrondis.
Vous pouvez fournir une ou deux valeurs :
Si vous fournissez une seule valeur, elle déterminera à la fois le
rayon horizontal et le rayon vertical.
Si vous fournissez deux valeurs, la première valeur détermine le rayon
horizontal, et la deuxième valeur détermine le rayon vertical.
Valeurs de propriété CSS border-bottom-left-radius
| Valeur | Description |
|---|---|
| length | Un nombre définissant le rayon de l’arrondie. La valeur par défaut est 0 |
| % | Un pourcentage définissant le rayon de l’arrondie. La valeur par défaut est 0. |
| initial | Met la valeur de la propriété à sa valeur par défaut. |
| inherit | Si cette valeur est indiquée, la propriété est héritée du parent. |
Appui de navigateurs de la propriété CSS border-bottom-left-radius
Les nombres dans le tableau spécifient la version à partir de laquelle le navigateur prend totalement en charge la propriété
border-bottom-left-radius.
Les numéros suivis du préfixe - webkit- ou - moz- spécifier la première version qui a fonctionné avec ce préfixe.
| Propriété | Navigateur |  |  |  |  |  |
| border-bottom-left-radius |
5.0 4.0 -webkit- |
9.0 |
4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Exemples : Exemple d’utilisation de la propriété border-bottom-left-radius
Sélectionner le code
<!doctype html>
<html>
<head>
<style type="text/css">
. arrondi {
width:250px;
height:70px;
padding:10px;
border: 1px dotted #141BED;
border-bottom-left-radius: 35px 20px;
-webkit-border-bottom-left-radius: 35px 20px; /* Safari et Chrome */
-moz-border-bottom-left-radius: 35px 20px; /* Firefox */
-ms-border-bottom-left-radius: 35px 20px; /* Internet Explorer */
-o-border-bottom-left-radius: 35px 20px; /* Opera */
}
</style>
</head>
<body>
<div class="arrondi">
Cet élément a le coin inférieur gauche arrondi.
</div>
</body>
</html>
Exemple pour voir une animation de l’arrondie du coin inférieur gauche
Sélectionner le code
<!DOCTYPE html>
<html>
<head>
<style>
#monDiv {
width: 350px;
height: 250px;
border: 1px solid black;
-webkit-animation: monAnimation 5s infinite; /* Chrome, Opera et Safari */
animation: monAnimation 3s infinite;
}
/* Chrome, Opera, Safari */
@-webkit-keyframes monAnimation {
40% {border-bottom-left-radius: 70px;}
}
/* La syntaxe Standard pour les versions qui la supportent */
@keyframes monAnimation {
40% {border-bottom-left-radius: 70px;}
}
</style>
</head>
<body>
<p>On agissant sur la propriété border-bottom-left le rayon est changé graduellement de 0 à 70px puis revenir à l'état initial
:<p>
<div id="monDiv"></div>
<p>La propriété border-bottom-left-radius est<em>animable</em> en CSS 3.</p>
<p><b>Remarque:</b> CSS Animation ne fonctionne pas dans Internet Explorer 9 et versions inférieurs.</p>
</body>
</html>
Exemple: Arrondir le coin inférieur gauche en utilisant le JavaScript
Sélectionner le code
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p>Cliquer sur le bouton Tester pour arrondir le coin inférieur gauche de l'élément Div avec la propriété border-bottom-left-radius:</p>
<button onclick="maFonction()">Tester</button>
<div id="myDIV">
<h1>Il est fontastique le JavaScript!!</h1>
</div>
<script>
function maFonction() {
document.getElementById("myDIV").style.borderBottomLeftRadius =
"25px";
}
</script>
</body>
</html>
Par Gerywa 05 Fevrier 2016
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
