CSS Kochbuch

3.2 Bilder mit Rahmen versehen

Problem

Sie wollen ein Bild mit einem Rahmen versehen.

Lösung

Verwenden Sie die Eigenschaft border für das Element img (siehe Abbildung 3-1):

img {
 width: 300px;
 border: 6px double #666;
 background: #fff;
 padding: 6px;
}

Abbildung 3-1. Ein Bild wird mit einem Rahmen versehen.

Diskussion

Wenn Sie das Bild als Link definieren, besteht die Möglichkeit, die Präsentation mit der Eigenschaft border noch komplexer zu gestalten. Durch die Verwendung der Pseudoklasse :hover kann der Rahmenstil verändert werden, wenn der Mauszeiger über das Bild bewegt wird (siehe Abbildung 3-2):

img { width: 30px; border: 4px double #666; background: ...