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.
La syntaxe des propriétés de bordure et de contour CSS est la suivante -
Selector {
border: /*value*/
outline: /*value*/
}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>Cela donne le résultat suivant -
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>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!
Utilisation régulière de grep
Outils d'évaluation des talents
Caractéristiques des systèmes d'information de gestion
Comment faire correspondre les nombres dans les expressions régulières
oicq
Que signifie le jumeau numérique ?
La différence entre les K8 et Docker
Comment utiliser la sous-intrigue dans Matlab
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
