Comment mettre la frontière intérieure en CSS
Lorsqu'une bordure est placée à l'intérieur du récipient, elle est connue sous le nom de bordure intérieure. Les bordures intérieures sont utilisées pour rendre le conteneur stable. Lorsqu'un conteneur est créé, sa hauteur et sa largeur se développent généralement avec l'ajout de différentes propriétés, telles que le rembourrage. Pour éviter cette situation, une bordure est placée à l'intérieur du récipient.
Dans cet article, nous apprendrons à définir la frontière intérieure de CSS.
Comment mettre la frontière intérieure en CSS?
Dans CSS, une bordure intérieure peut être définie en utilisant les propriétés suivantes:
- propriété de dimensionnement en boîte
- Décéder la propriété
- Propriété Box-Shadow
Explorons chaque propriété avec des exemples utiles.
Méthode 1: Utilisation de la propriété de taille de boîte pour définir la bordure intérieure en CSS
Le "dimensionnement en boîte»La propriété maintient la hauteur et la largeur du conteneur lorsque le rembourrage ou la bordure y est ajouté. Lorsque la propriété de dimensionnement en boîte est utilisée avec le «borne»Valeur, le rembourrage et la bordure de l'élément seront inclus dans la hauteur et la largeur totales.
Maintenant, consultez l'exemple fourni.
Exemple
Actuellement, notre page Web dispose d'un conteneur avec hauteur et largeur comme «250px". Cependant, lorsque nous avons ajouté une bordure, la valeur et la valeur de largeur spécifiées s'étendent à «276px», Qui peut être vu dans l'image ci-dessous:
Dans notre fichier HTML, nous avons ajouté un ""Avec une classe"exemple"Et le placé à l'intérieur du"" étiqueter:
Pour styliser le conteneur créé, mettez un «."Avant le nom de classe comme".exemple". Ensuite, spécifiez la hauteur et la largeur comme «250px", met le "13px«Border orange, et utilisez le«borne"En tant que propriété de taille en boîte. De plus, nous avons également établi le «Couleur de l'arrière plan" comme "aqua"Pour distinguer l'arrière-plan et la bordure ajoutée.
Enregistrez le code fourni et ouvrez le fichier HTML dans votre navigateur:
.exemple
Color en arrière-plan: Aqua;
Largeur: 250px;
hauteur: 250px;
Border: 13px Orange solide;
Dimensionnement en boîte: Border-Box;
En conséquence, la bordure sera ajoutée à l'intérieur du conteneur, et la hauteur et la largeur resteront la même:
Aller de l'avant vers la méthode suivante!
Méthode 2: Utilisation de la propriété Outline pour définir la bordure intérieure de CSS
Le CSS "contour»La propriété ajoute facilement une ligne autour de la boîte de l'élément avec la largeur, la couleur et le type souhaités. Cela signifie que nous pouvons utiliser la propriété de contour pour définir la bordure intérieure. De plus, le «Offset-offset » la propriété aide à restreindre l'expansion de la frontière.
Exemple
Spécifie le "contour«Propriété avec la valeur»orange solide 12px», Où l'orange est la couleur de la ligne et 12px est la largeur, et le solide est un type de style pour la ligne. Ensuite, utilisez le "décalage«Propriété avec le«-12px" valeur. Cela mettra la bordure à l'intérieur du conteneur et retendra l'expansion par rapport au conteneur:
.exemple
Color en arrière-plan: Aqua;
Largeur: 250px;
hauteur: 250px;
Aperçu: Orange solide 12px;
Offset Offset: -12px;
Sortir
Sur planant sur le conteneur ajouté montrera sa dimension actuelle qui est «250 x 250«Comme spécifié dans le fichier html:
Vous voulez régler une bordure intérieure à l'aide d'ombres? Voyons la section suivante.
Méthode 3: Utilisation de la propriété Box-Shadow pour définir la bordure intérieure en CSS
Le "boîte ombre»La propriété est principalement utilisée pour abandonner les ombres des cadres des éléments. Cependant, l'utilisation de cette propriété d'une certaine manière peut définir efficacement la bordure intérieure.
Exemple
Dans le fichier HTML, indiquez le «boîte ombre«Propriété avec la valeur»encart 0px 0px 0px 12px orange», Là où l'orange est une couleur, 12px rendra l'ombre plus large et que l'insolution placera l'ombre à l'intérieur du récipient. Les autres valeurs de 0px sont liées à la compensation et au flou. La combinaison de toutes ces valeurs formera une bordure intérieure à l'aide d'ombres:
.exemple
Color en arrière-plan: Aqua;
Largeur: 250px;
hauteur: 250px;
Box-shadow: inset 0px 0px 0px 12px orange;
Sortir
Pour vérifier si les valeurs de hauteur et de largeur sont toujours les mêmes, affichez la dimension du conteneur en le survolant:
Nous avons offert les méthodes les plus appropriées pour établir des frontières intérieures dans CSS.
Conclusion
Pour définir la bordure intérieure, vous pouvez utiliser le «dimensionnement en boîte","contour", et "boîte ombre»Propriétés CSS. La propriété de dimensionnement en boîte est utilisée pour restreindre l'expansion de la bordure ajoutée. La propriété de contour est utilisée en combinaison avec le décalage de contour pour ajouter un contour comme bordure intérieure. De plus, les ombres peuvent également être utilisées à des fins spécifiées à l'aide de la propriété Box-Shadow. Dans cet article, nous avons décrit trois méthodes pour définir la frontière intérieure en CSS.