Comment donner une bordure à n'importe quel élément en utilisant css sans ajouter border-width à toute la largeur d'un élément?
Comme dans Photoshop, nous pouvons donner des traits - à l'intérieur, au centre et à l'extérieur
Je pense que les propriétés de bordure css par défaut sont centrées comme centre dans photoshop, ai-je raison?
Je veux donner une bordure à l'intérieur de la boîte, pas à l'extérieur. et ne veulent pas inclure la largeur de la bordure dans la largeur de la boîte.
Découvrez CSS box-sizing...
Le box-sizing propriété CSS3 pouvez le faire. La frontière-zone de valeur (par opposition au contenu de la boîte de défaut) fait la finale de la boîte de la déclaration de largeur, et de toute frontière et de rembourrage de coupe à l'intérieur de la boîte. Vous pouvez déclarer votre élément à être de 100% de largeur, y compris les pixels en fonction de remplissage et de bordure, et d'atteindre votre objectif parfaitement.
Je suggère la création d'un mixin qui s'en occupera pour vous. Vous pouvez trouver plus d'informations sur box-sizing au W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Selon votre navigateur, vous pouvez utiliser l' box-shadow de la propriété.
Vous pouvez définir la valeur de flou à 0 et l'écart de ce que jamais l'épaisseur que vous êtes après. La grande chose au sujet de zone d'ombre, c'est que vous pouvez contrôler si elle est tirée à l'extérieur (par défaut) ou à l'intérieur (à l'aide de l' inset de la propriété).
Exemple:
box-shadow: 0 0 0 1px black; // Outside black border 1px
ou
box-shadow: 0 0 0 1px white inset; // Inside white border 1px
Un grand avantage de l'utilisation de la zone d'ombre est que vous pouvez faire preuve de créativité en utilisant plusieurs zone d'ombres:
box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;
La seule chose que je ne peux pas dire, c'est quelle différence cela fera performances de rendu sage. Je suppose qu'il pourrait devenir un problème si vous aviez des centaines d'éléments à l'aide de cette technique sur l'écran à la fois.
J'ai rencontré le même problème.
.right-border {
position: relative;
}
.right-border:after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 1px;
height: 100%;
background: #e0e0e0;
}
Cette réponse vous permet de spécifier un seul côté. Et fonctionnerait dans IE8 + - contrairement à l'utilisation de box-shadow.
Bien sûr, changez les propriétés de vos pseudo-éléments car vous devez sélectionner un côté spécifique.
* Nouveau et amélioré *
&:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}
Cela permet d'utiliser la bordure et de toucher plusieurs côtés d'une boîte.
Comme abenson dit, vous pouvez utiliser un contour , mais une chasse aux sorcières, c'est que l'Opéra peut dessiner un "non-rectangulaire". Une autre option qui semble fonctionner est d'utiliser des marges négatives, comme ce css:
div {
float:left;
width: 50%;
border:1px solid black;
margin: -1px;
}
Avec ce code html:
<body>
<div>A block</div>
<div>Another block</div>
</body>
Un autre moins propre option est d'ajouter de balisage html. Par exemple, vous définissez la largeur d'un élément extérieur et ajouter une bordure à l'intérieur. Le CSS:
.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }
Et le code html:
<body>
<div class="outer">
<div class="inner">A block</div>
</div>
<div class="outer">
<div class="inner">Another block</div>
<div>
</body>
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
