Maison > Article > interface Web > Comment définir un effet de bordure pour une image via l'attribut CSS border

Comment définir un effet de bordure pour une image via l'attribut CSS border

不言original: 2018-07-16 16:34:235603parcourir

Comment définir une bordure pour une image via CSS. En HTML, une bordure est ajoutée à une image via la valeur de l'attribut border de la balise a1f02c36ba31691bcfe87b2722de723b attribut Style, border-style définit le style de la bordure, comme une ligne pointillée, une ligne continue ou une ligne pointillée, etc.

HTML définit la bordure de l'image

En HTML, la valeur de l'attribut border de la balise a1f02c36ba31691bcfe87b2722de723b contrôler l'épaisseur de la bordure. Lorsque cette valeur est égale à 0, cela signifie qu'il n'y a pas de bordure.

<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>

Le code est comme ci-dessus. Vous pouvez voir que toutes les bordures sont noires, et le style est très unique, toutes sont des lignes pleines. Seule l'épaisseur de la bordure peut être ajustée.

CSS définit la bordure de l'image

Avec les invites de syntaxe dans Dreamweaver, vous pouvez facilement obtenir les valeurs de différents styles de bordure.

Vous pouvez définir la couleur de la bordure via border-color, et définir l'épaisseur de la bordure via border-width.

<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>

Le code est comme ci-dessus. L'effet de la première image est une ligne pointillée dorée de 5 pixels de large, et la deuxième image est une ligne bleue de 2 pixels. -large ligne pointillée.

En CSS, vous pouvez définir respectivement quatre styles de bordures différents, à savoir les styles bordure gauche, bordure droite, bordure supérieure et bordure inférieure.

<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>

Le code est comme ci-dessus, définissant différents styles pour les quatre bordures de l'image. Cette méthode est également souvent utilisée dans de nombreux autres éléments HTML.

Attribut Border, vous pouvez également écrire chaque valeur dans la même instruction, séparée par des espaces, ce qui peut réduire considérablement la longueur du code.

<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>

De cette façon, la vitesse de téléchargement de la page Web peut être accélérée et elle sera plus claire et plus facile à lire.

De plus, en plus de l'attribut border qui peut écrire les valeurs de divers attributs ensemble, de nombreux autres attributs CSS peuvent également effectuer des opérations similaires, par exemple des attributs tels que. la police, la marge et le remplissage peuvent tous être unifiés.

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

Recommandations associées :

Deux façons d'implémenter le style de ligne pointillée CSS : pointillés et pointillés (exemple)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Deux façons d'implémenter le style de ligne pointillée CSS : en pointillés et en pointillés (exemple)Article suivant：Deux façons d'implémenter le style de ligne pointillée CSS : en pointillés et en pointillés (exemple)

Articles Liés

Voir plus