Bilder mit abgerundeten Ecken

Question

Wie funktionieren Websites wie diese Bilder mit abgerundeten Ecken anzeigen lassen?

Ich habe mit Firebug überprüft, dass das heruntergeladene Bild scharfe Ecken hat, aber das angezeigte Bild wurde irgendwie verändert.

EDIT: Ich beziehe mich auf die abgerundeten Miniaturbilder, die auf der genannten Website im Abschnitt "Herausragende Artikel" zu sehen sind.

Answer 1

Es besteht eigentlich überhaupt keine Notwendigkeit, die <img> Tags, um das zu erreichen, was diese Website tut. Man kann das alles mit CSS machen (ohne CSS3-Eigenschaften zu verwenden). Der Trick bei abgerundeten Ecken besteht darin, zusätzliche Elemente zu finden, an die Sie Ihr Eckbild in CSS anhängen können.

Siehe:

Schiebetüren und Benutzerdefinierte Ecken

Vergessen Sie all diese Beiträge über moz-border-radius y -webkit-border-radius . Die CSS3-Eigenschaft heißt einfach border-radius und alle modernen Browser unterstützen es.

Answer 2

Sie verwenden Bilder zur Abrundung der Ecken. Sie können dies tun mit <img> Tags, wie sie es tun, oder geben Elemente wie <div> s und solche Hintergrundbilder mit CSS.

Ihre Website verwendet abgerundete Bilder ... nicht sicher, was Sie in FireBug sagen, aber sie sind abgerundet. Alternativ statt der Verwendung separater <img> Tags können Sie css-Hintergrundbilder für ganze Abschnitte oder für Rahmen verwenden.

Eine Alternative ist abgerundete Ecken in CSS aber noch nicht alle Browser unterstützen dies.