Maison >interface Web >tutoriel CSS >Apprenez la différence entre les bordures et les contours CSS
Apprenez la différence entre les bordures et les contours CSS
- WBOYavant
- 2023-09-15 08:25:01697parcourir
La propriété de bordure CSS est utilisée pour définir les propriétés de bordure des éléments. C'est un raccourci pour la largeur, le style et la couleur de la bordure. Vous pouvez styliser les bordures de chaque côté et spécifier le rayon de la bordure.
Les contours CSS, en revanche, ne prennent pas de place et, s'ils sont définis, apparaissent autour d'une bordure. Il prend en charge le décalage. De plus, nous ne pouvons pas spécifier si les arêtes individuelles doivent avoir des contours.
Par défaut, les bordures et les contours ne sont pas affichés.
Syntaxe
La syntaxe des propriétés de bordure et de contour CSS est la suivante -
Selector {
border: /*value*/
outline: /*value*/
}Exemple
L'exemple suivant illustre les propriétés de bordure et de contour CSS -
Démo en direct
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 15px;
padding: 20px;
width: 35%;
border: thin solid green;
outline-width: 5px;
outline-style: ridge;
outline-color: fuchsia;
border-radius: 50px;
}
</style>
</head>
<body>
<h2>Example</h2>
<div>This is it!</div>
</body>
</html>Sortie
Cela donne le résultat suivant -
Exemple
Démonstration en direct
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 40px;
padding: 12px;
width: 30%;
border: thick dashed green;
outline: 5px inset;
outline-color: fuchsia;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text surrounded by border and outline.</p>
</body>
</html>Sortie
Cela donne la sortie suivante-
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!