CSS Image Border Ideen

Bild-Grenzen sind eine einfache Möglichkeit, Bilder auf Ihrer Website abheben werden. CSS ist ein effizientes Hilfsmittel Ihre Grenzen Bild anpassen, da Sie alle Bilder auf einmal zu ändern oder nur bestimmte Bilder in der gesamten Website auswählen können. Sie können Bild Grenzen aktualisieren, ohne zu besuchen jeweils ein oder öffnen Sie Ihre Bildbearbeitungssoftware. Da Ihre Grenze in CSS und nicht Teil des Fotos ist, ist seine Qualität nicht durch Optimierung abgenommen.

CSS-Border-Presets

CSS bietet voreingestellte Grenze zu formatieren, dass Sie auf Ihre Bilder anwenden können, mit dem Code "-Rahmenart:" und setzen den Stil Namen oder Wert, nach dem Doppelpunkt. Verwenden Sie diese auf einmal alle vier Grenzen festlegen. Einige Werte sind "dotted", "Gestrichelt", "solid", "groove"Doppel"," "Ridge," "Einpresstiefe" und "Outset" (siehe Referenzen). Ein Beispiel für diesen Code ist: {Grenze-Stil: Grat;}.

Manuelles Festlegen der Grenze

Presets sind nicht Ihre einzige Option. Eingestellt, Ihre Grenzen manuell, styling von allen Seiten mit "Grenze:" und darunter das Format nach dem Doppelpunkt. Ein Beispiel ist: {Border: 2px solid #00FFFF;}. Dadurch erhalten Sie einen durchgehenden Rahmen mit einer Dicke von 2 Pixel in einer hellen Farbe blau/grün.

Jeder Seite Farbe

Sie können festlegen, individuelle Grenze Seiten, Anpassen von Farbe und Dicke der einzelnen. Eine Möglichkeit ist, legen Sie Links und oben Seiten eine hellere Farbe als die Rechte und untere Seite. Dadurch erhalten Sie die Darstellung des Bildes wie eine Schaltfläche ausgelöst wird. Ein Beispiel ist:

{border-top:2px solid #B49B82;

border-left:2px solid #B49B82;

border-bottom:2px solid #603A00;

border-right:2px solid #603A00;}

Eingestellt von Padding

In allen diesen Beispielen können Sie ein weiteres Attribut festlegen "auffüllen." Legen Sie die Polsterung Farbe mit dem Attribut "Background-Color". Mit diesem kann Bild, Matten, Hinzufügen von Tiefe und geben Sie einen anderen Bereich Farben mit den Gesamtplan von Ihrer Website oder nur einer Seite koordinieren ähneln. Verwenden Sie die folgenden Codezeilen, um Polsterung festzulegen:

{padding: 1px;

background-color: #FF0;}

Identifizierenden Bilder

Festlegen der Grenzen mit Hilfe von CSS können Sie einige oder alle Stil wählen. Wählen Sie Ihre Bilder, indem man ihnen eine bestimmte ID (#img) oder Klassenname (.img). Verwenden Sie für mehr als ein Bild auf einer Seite-Klasse, da Sie mehrere Tags verwenden derselben Klasse auf einer Web-Seite haben können. Für nur ein Bild auf der Seite können Sie eine ID, es zu benennen; nur ein Tag kann diesem ID-Namen pro Seite haben.

Warnung

Browser zeigen Rahmenarten manchmal anders, wenn Sie die Voreinstellungen verwenden. Manuelles Festlegen von Grenzen gibt Ihnen ein einheitlicheres Aussehen in verschiedenen Browsern.

Alle Bildattribute Grenze muß innerhalb Ihres Bildes Klasse oder ID.

Zwei Websites, die Ihnen, mit der Farbe-Kommissionierung helfen können sind im Bereich Ressourcen.