HTML を使用して画像に境界線効果を追加する方法を教える 1 つのトリック (詳細なコードの説明)-htmlチュートリアル-php.cn

HTML を使用して画像に境界線効果を追加する方法を教える 1 つのトリック (詳細なコードの説明)

奋力向前

リリース： 2021-08-19 19:11:52

オリジナル

21076 人が閲覧しました

前回の記事「CSSを使って丸いボタン効果を作る方法をステップバイステップで教えます(詳しいコード説明)」では、CSSを使って丸いボタンの効果を作る方法を紹介しました。ボタン効果。次の記事では、HTML を使用して写真に境界線効果を追加する方法を紹介します。その方法を見てみましょう

HTML を使用して画像に境界線効果を追加する方法を教える 1 つのトリック (詳細なコードの説明)

境界線効果を追加する方法

#1. HTML コードソフトウェアを開き、コードを作成します。画像効果を追加するには 2 つの方法があります。

#1 つの方法: 画像にストロークを追加するか、外側のボックスにストロークを追加します。。

2 番目の方法: img 画像タグを直接追加します。

2 つのオプションのいずれかを選択します。私は 2 番目の方法を使用します。

コード例

<style>
<div>{
 margin-top:50px;
 margin-left: 100px: 
}
</style>
</head>
<body>
<div>
<img  src="787.jpg" alt="HTML を使用して画像に境界線効果を追加する方法を教える 1 つのトリック (詳細なコードの説明)" >
</div>

ログイン後にコピー

コード効果

HTML を使用して画像に境界線効果を追加する方法を教える 1 つのトリック (詳細なコードの説明) コード効果が出てきて、もう国境はない。

2. 画像に境界線の設定を追加します。スタイル: border-style、スタイルには実線、破線などが含まれます。色は border-color で設定され、太さは border-width で設定されます。

注: 境界線のスタイル、border-style は重要です。そうでない場合、他のすべての属性は無効になります。

div img{
border-style: dashed;
border-width: 5px;
border-color: blue;

ログイン後にコピー

HTML を使用して画像に境界線効果を追加する方法を教える 1 つのトリック (詳細なコードの説明) コード効果が出ると枠線の色になり、点線で枠線が構成されます

3. この3つを組み合わせますborder:dashed 5px blue のような属性を An 属性に変換すると、効果は同じなので非常に便利です。

div img{
border:dashed 5px blue;
}

ログイン後にコピー

HTML を使用して画像に境界線効果を追加する方法を教える 1 つのトリック (詳細なコードの説明) 3 つの属性が 1 つの属性に結合されているため、コードの効果は変わりません。次に、画像の片側にのみ効果を追加することを選択します。

4. 左: border-left、右: border-right、上: border-top、下: border-left この設定により、どの辺も独立して設定できます。

div img{
border:dashed 5px blue;
border-right:solid 10px blue; 
border-top: solid 10px blue;
    border-bottom: solid 10px blue;
    border-left:  solid 10px blue;
}

ログイン後にコピー

HTML を使用して画像に境界線効果を追加する方法を教える 1 つのトリック (詳細なコードの説明) 5. コードエフェクトが出てしまい、ほぼこの状態ですが、ボーダー幅を大きくすることはできますか？ div の border 属性で境界線の色を制御し、境界線の幅を 20px に、色を青に設定します。

div img{
	border:dashed 5px blue;
	border-right:solid 20px blue; 
	border-top: solid 20px blue;
    border-bottom: solid 20px blue;
    border-left:  solid 20px blue

ログイン後にコピー

HTML を使用して画像に境界線効果を追加する方法を教える 1 つのトリック (詳細なコードの説明) 最終的な効果です。