Je voudrais ajouter une bordure blanche sur toutes mes images dans mon contenu div en utilisant CSS. Les images des zones div de l'en-tête et du pied de page ne doivent pas être affectées. Comment puis-je y arriver? Voir l'exemple d'image ci-dessous. Il y a des images de différentes tailles sur les pages Web.
Voir image:
Vous pouvez le faire sans avoir d’élément supplémentaire ni de pseudo élément:
http://cssdeck.com/labs/t6nd0h9p
img {
outline: 1px solid white;
outline-offset: -4px;
}
IE9 et 10 ne supportent pas la propriété outline-offset, mais sinon, le support est bon: http://caniuse.com/#search=outline
Solution alternative qui ne nécessite pas de connaître les dimensions de l’image:
http://cssdeck.com/labs/aajakwnl
<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>
div.ie-container {
display: inline-block;
position: relative;
}
div.ie-container:before {
display: block;
content: '';
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
border: 1px solid white;
}
img {
vertical-align: middle; /* optional */
}
Vous pouvez essayer ceci:
Html:
<div class="image">
<div class="innerdiv">
</div>
</div>
Css:
.image
{
width: 325px;
height: 239px;
background:url(http://www.modernvice.com/files/images/backgrounds/_Zoom/black-pony.jpg) 0 0 no-repeat;
padding: 10px;
}
.innerdiv
{
border: 1px solid white;
height:100%;
width: 100%;
}
J'espère que c'est ce que tu voulais dire :)
Quel que soit le div ID ou la classe, vous pouvez simplement ajouter
#yourDivIDExample {
...
}
#yourDivIDExample img{
border:1px solid #ffffff;
}
Cela créera une bordure autour des images dans la div elle-même. Même travail pour les classes ou règle globale aussi
img {
border:1px solid #ffffff;
}
J'ai résolu ceci avec box-shadow: inset
et cela fonctionne avec IE11 et supérieur . Je voulais une bordure dans les coins autour de l'image mais ces exemples ont la bordure 10px
insère. Il nécessite un parent div
avec l'élément :before
ou :after
mais le gère très bien.
.image {
width: 100%;
height: auto;
}
.image__wrapper {
position: relative;
}
.image__wrapper:before {
content: '';
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
box-shadow: inset 0 0 0 3px red;
}
Vous pouvez faire quelque chose comme ceci DEMO
HTMl
<div class="imgborder">
<div class="in-imgborder">
</div>
</div>
CSS
.imgborder {
width: 300px;
height: 300px;
position: relative;
background: url(http://placekitten.com/300/300) no-repeat;
}
.in-imgborder {
width: 290px;
height: 290px;
position: absolute;
top: 4px;
left: 4px;
border: 1px solid red;
}