Je me demande s'il est possible de réaliser cet effet uniquement avec css. Comme vous avez probablement remarqué l'image ont 4 frontières si vous zoomez un peu (sans cette ombre, je ne veux pas utiliser cela).effet de bordure css
img http://img265.imageshack.us/img265/192/version203.jpg
Il semble que déjà fait la frontière la plus vers l'extérieur en utilisant CSS avec un simple effet de frontière. La bordure la plus externe serait une boîte avec une bordure et un peu de remplissage pour pousser l'image à l'intérieur. Puis, en descendant dans la case grise, vous pouvez utiliser une autre boîte avec border: 3px double puisque la couleur de la bordure est la même que la couleur de fond, et ajouter background-clip: padding-box pour que l'arrière-plan ne couvre pas la ligne blanche entre la double bordure. Il semble également qu'il y aurait autour d'un rayon de bordure de 3px sur cette boîte et un peu de rembourrage jusqu'à ce que vous arriviez à l'image réelle qui a simplement une bordure blanche autour de lui.
Un exemple simple de CSS:
span.imgbox {
background: #CCC;
background-clip: padding-box;
border: 3px double #CCC;
border-radius: 3px;
display: inline-block;
padding: 10px;
}
span.imgbox > img {
border: 1px solid #FFF;
}
Ceci est généralement ce qu'impliquerait, supposant que vous ne voulez pas la boîte blanche avec bordure noire comme le montre la vue du site réel, mais seulement la frontières que vous voulez qui sont montrées dans l'image elle-même.
Avec box-shadow, vous pouvez émuler plusieurs bordures. C'est exactement ce que vous cherchez:
http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow/
vous pouvez mélanger box-shadow, contour, frontière, et le rembourrage/background-color ... mais ce ne serait pas le navigateur cross ..
border: 4px solid #000;
outline: 4px solid #f00;
background-color: #ff0;
padding: 10px;
box-shadow: 0px 0px 0px 4px #333;
Je pense que la seule façon est d'avoir des éléments imbriqués.
merci! Est-il possible d'ajouter cette ombre en bas avec css? – agis
@Alecs: Je ne crois pas que CSS puisse faire une ombre bizarre comme ça, au moins de tous les exemples que j'ai jamais vus avec les ombres et la lueur. – animuson
Oh, pas mal, je me demande comment je peux ajouter cet effet parce que si je l'utilise comme image d'arrière-plan, je pense que cela ne fonctionne pas parce que la largeur des images est définie par un utilisateur de back-end, donc j'ai besoin de effet pour être ok pour chaque largeur d'une image ... – agis