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

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

不言

Freigeben： 2018-07-16 16:34:23

Original

5641 Leute haben es durchsucht

So legen Sie einen Rahmen für ein Bild über CSS fest. In HTML werden einem Bild über den Border-Attributwert des Tags 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 -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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!