La bordure intérieure sur les images avec le CSS?
Je voudrais ajouter une bordure blanche sur toutes mes images dans mon div du contenu à l'aide de css. Les Images dans l'en-tête et pied de page div zones ne devraient pas être affectés. comment puis-je y parvenir? Voir l'exemple de l'image ci-dessous. Il y a des images de différentes tailles sur les pages web.
Voir image:
- Voir ici: stackoverflow.com/questions/9051228/css-inner-border Et une solution de travail de ce que tu veux: jsfiddle.net/ThinkingStiff/bNmzB
- Ces réponses ne fonctionne qu'avec un solide "de fond", pas un modèle.
- n'est-il pas avoir un fond uni? Je ne vois pas de motifs.
- L'image elle-même est un modèle. Tentez votre démonstration à l'aide d'une image réelle et de voir que cela ne fonctionne pas.
- le post j'ai relié a une autre réponse, qui utilise une image de fond ainsi... j'ai choisi une des réponses qui avait un JSFiddle représentant le même blanc intérieur des frontières qu'il avait.
Vous devez vous connecter pour publier un commentaire.
Vous pouvez le faire sans avoir un élément supplémentaire ou pseudo-élément:
http://cssdeck.com/labs/t6nd0h9p
IE9&10 ne prennent pas en charge le contour du décalage de la propriété, 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
Vous pouvez essayer ceci:
Html:
Css:
jsFiddle
Espère que c'est ce que tu voulais dire 🙂
Quel que soit le div ID ou une classe, vous pouvez simplement ajouter
Cela va créer une bordure autour des images dans la div de lui-même.. même pour les classes ou d'une règle aussi ..
Vous pouvez faire quelque chose comme ceci DÉMO
HTMl
CSS
J'ai résolu ce problème avec
box-shadow: inset
et il fonctionne avec IE11 et jusqu'. Je voulais une frontière dans les coins autour de l'image, mais ces exemples ont la frontière10px
encart. Il nécessite un parentdiv
avec:before
ou:after
élément, mais le gère très bien.CodePen Démo