HTML | 画像に縁を付ける
HTMLだけで画像に縁を付ける方法とサンプルコードを紹介しています。
HTMLで画像に縁を付ける
画像タグは他の要素と同様に「border」プロパティや「outline」プロパティが利用できます。
HTMLだけで画像に縁を付けるには、style属性にて「border」プロパティにて枠線のタイプ、サイズ、色を指定していきます。
枠線のサイズ指定は、画像の外側に向かって拡縮しますで要素のサイズに影響します。
<img style="border: solid 20px green;" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
枠線を画像に内側に広げたい場合は「outline」プロパティが便利です。
「outline」プロパティにて「border」プロパティと同様に値を指定しておき、「outline-offset」プロパティで枠線のサイズと同じサイズの値を指定する事で画像のサイズはそのままに内側に向かって枠線を引く事が可能です。
<img style="outline: 20px solid green; outline-offset: -20px;" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">