简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

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

不言
リリース： 2018-07-16 16:34:23
オリジナル
5601 人が閲覧しました

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>
ログイン後にコピー

関連する推奨事項:

CSS 点線スタイルを実装する 2 つの方法: 点線と破線 (例)

以上がCSS の境界線属性を使用して画像の境界線効果を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
CSS的border属性
ソース：php.cn
前の記事：CSS 点線スタイルを実装する 2 つの方法: 点線と破線 (例) 次の記事：CSS を使用して丸い境界線の効果を実現する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
Endpoint _header 属性を JSON 応答オブジェクトに追加します。 リモート エンドポイント サービス (npoint.io) からデータを取得するテストをしています。応答オブジェクトが返されると、JSON に「_headers」属性が追加されます...
から 2024-04-05 10:35:39
0
1
1376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！