Maison > Article > interface Web > 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:01669parcourir

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 -

Apprenez la différence entre les bordures et les contours CSS

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-

Apprenez la différence entre les bordures et les contours CSS

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!

css

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment mettre en surbrillance une barre de recherche Google (comme une zone de saisie) au survol à l'aide de CSS ?Article suivant：Comment mettre en surbrillance une barre de recherche Google (comme une zone de saisie) au survol à l'aide de CSS ?

Articles Liés

Voir plus