Heim > Artikel > Web-Frontend > So legen Sie einen Randeffekt für ein Bild über das CSS-Randattribut fest

So legen Sie einen Randeffekt für ein Bild über das CSS-Randattribut fest

不言Original: 2018-07-16 16:34:235603Durchsuche

So legen Sie einen Rahmen für ein Bild über CSS fest. In HTML werden einem Bild über den Border-Attributwert des Tags a1f02c36ba31691bcfe87b2722de723b Attribut „Stil“, „Rahmenstil“ definiert den Stil des Rahmens, z. B. gestrichelte Linie, durchgezogene Linie oder gepunktete Linie usw.

HTML legt den Rand des Bildes fest

In HTML wird der Randattributwert des a1f02c36ba31691bcfe87b2722de723b-Tags verwendet, um dem Bild einen Rand hinzuzufügen Steuern der Dicke des Randes. Wenn dieser Wert 0 ist, bedeutet dies, dass kein Rand vorhanden ist.

<span style="font-size:24px;">
<img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg"  border="0">
<img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg"  border="1">
<img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg"  border="2">
</span>

Der Code ist wie oben. Sie können sehen, dass alle Ränder schwarz sind und der Stil sehr einfarbig ist. Nur die Dicke des Randes kann angepasst werden.

CSS legt den Rand des Bildes fest

Mit Syntax-Eingabeaufforderungen in Dreamweaver können Sie ganz einfach die Werte verschiedener Rahmenstile abrufen.

Sie können die Farbe des Rahmens über „border-color“ und die Dicke des Rahmens über „border-width“ definieren.

<html>
<span style="font-size:24px;">
	<head>
		<title>
			边框
		</title>
		<style>
			<!--
			img.test1{
			border-style:dotted;
			border-color:#FF9900;
			border-width:5px;
		}
			img.test2{
			border-style:dashed;
			border-color:blue;
			border-width:2px;
		}
			-->
		</style>
	</head>

	<body>
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" class="test1">
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" class="test2">
	</body>
</span>
</html>

Der Code ist wie oben. Der Effekt des ersten Bildes ist eine goldene, 5 Pixel breite gepunktete Linie und das zweite Bild ist eine blaue, 2 Pixel breite gepunktete Linie.

In CSS können Sie jeweils vier verschiedene Rahmenstile festlegen, nämlich die Stile „Rand links“, „Rand rechts“, „Rand oben“ und „Rand unten“.

<html>
<span style="font-size:24px;">
	<head>
		<title>
			分别设置4个边框
		</title>
		<style>
			<!--
			img{
			border-left-style:dotted;
			border-left-color:#FF9900;
			border-left-width:5px;
			border-right-style:dashed;
			border-right-clolr:#33CC33;
			border-right-width:2px;
			border-top-style:solid;
			border-top-color:#CC00FF;
			border-top-width:10xp;
			border-bottom-style:groove;
			border-bottom-color:#666666;
			border-bottom-width:15px;
		}
			-->
		</style>
	</head>

	<body>
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"">
	</body>
</span>
</html>

Der Code ist wie oben und legt verschiedene Stile für die vier Ränder des Bildes fest. Diese Methode wird auch häufig in vielen anderen HTML-Elementen verwendet.

Border-Attribut, Sie können auch jeden Wert durch Leerzeichen getrennt in dieselbe Anweisung schreiben, was die Länge des Codes erheblich reduzieren kann.

<html>
<span style="font-size:24px;">
	<head>
		<title>
			合并各CSS值
		</title>
		<style>
			<!--
			img.test1{
			border:5px double #FF00FF;
		}
			img.test2{
			border-right:5px double #FF00FF;
			border-left:8px solid #0033FF;
		}
			-->
		</style>
	</head>

	<body>
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test1">
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test2">
	</body>
</span>
</html>

Auf diese Weise kann die Download-Geschwindigkeit der Webseite beschleunigt werden und sie wird klarer und leichter lesbar.

Zusätzlich zum Border-Attribut, das die Werte verschiedener Attribute zusammenschreiben kann, können auch viele andere Attribute von CSS ähnliche Vorgänge ausführen. Beispielsweise können Attribute wie Schriftart, Rand und Abstand können alle vereinheitlicht werden.

<span style="font-size:24px;">
p{
	font:italic bold 30px Arial,Helvetica,sans-serif;
	padding:0px 5px 0px 3px;
}
</span>

Verwandte Empfehlungen:

Zwei Möglichkeiten, den CSS-Stil mit gepunkteten Linien zu implementieren: gepunktet und gestrichelt (Beispiel)

Das obige ist der detaillierte Inhalt vonSo legen Sie einen Randeffekt für ein Bild über das CSS-Randattribut fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zwei Möglichkeiten, den CSS-Stil mit gepunkteten Linien zu implementieren: gepunktet und gestrichelt (Beispiel)Nächster Artikel：Zwei Möglichkeiten, den CSS-Stil mit gepunkteten Linien zu implementieren: gepunktet und gestrichelt (Beispiel)

In Verbindung stehende Artikel

Mehr sehen