CSS の境界線属性を使用して画像の境界線効果を設定する方法-CSSチュートリアル-php.cn

CSS の境界線属性を使用して画像の境界線効果を設定する方法

不言

リリース： 2018-07-16 16:34:23

オリジナル

5658 人が閲覧しました

CSS を使用して画像の境界線を設定するには? HTML では、タグの border 属性値を使用して画像に境界線を追加します。 style は、破線、実線、点線などの境界線のスタイルを定義します。

HTML は画像の境界線を設定します

HTML では、タグの border 属性値を使用して、境界線の太さを制御します。値が 0 の場合、それは国境がないことを意味します。

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

ログイン後にコピー

コードは上記のとおりです。すべての枠線が黒で、スタイルはすべて実線であることがわかります。枠線の太さのみを調整できます。

CSS は画像の境界線を設定します

Dreamweaver の構文プロンプトを使用すると、さまざまな境界線スタイルの値を簡単に取得できます。

border-color で境界線の色を定義し、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>

ログイン後にコピー

コードは上記のとおりです。最初の画像の効果は、金色の幅 5 ピクセルの点線であり、2 番目の画像は、青色の幅 2 ピクセルの点線です。

CSS では、border-left、border-right、border-top、border-bottom スタイルという 4 つの異なる境界線スタイルを設定できます。

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

ログイン後にコピー

コードは上記の通りで、画像の 4 つの境界線に異なるスタイルを設定します。このメソッドは他の多くの HTML 要素でもよく使用されます。

Border 属性を使用すると、各値をスペースで区切って同じステートメントに記述することもでき、コードの長さを大幅に短縮できます。

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

ログイン後にコピー

このようにして、Web ページのダウンロード速度が高速化され、より鮮明で読みやすくなります。

また、様々な属性値をまとめて記述できるborder属性以外にも、font、margin、paddingなどのCSSの他の多くの属性でも同様の操作を行うことができます。

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

ログイン後にコピー