imgタグの中に、style=""でCSSを書き込むと、簡単に画像を飾ることができます。
<img
src="http://winboys.net/digicame/kathmandu/np1/Cimg3108.jpg"
style="border: 9px solid #00cccc;">
<img
src="http://winboys.net/digicame/kathmandu/np1/Cimg2888.jpg"
width="320" style="border: outset
10px #a06000;"><br><br>
<img
src="http://winboys.net/digicame/palau2/P1000122.jpg" style="box-shadow: 4px 4px 6px gray;">
<img
src="http://winboys.net/digicame/noto2011/sr03.jpg" style="background:
url(http://winboys.net/digicame/csstest/bg.gif);padding: 10px;">
コピー貼り付けで確認できるよう、画像のアドレスは、実際のネットにあるものを使っているので長くなっていますが、CSSの表記はstyle=""の中にあるものです。
border:
9px solid #00cccc; は、境界が9ピクセル 塗りつぶし 色コードが00ccccで濃い水色
border: outset 10px #a06000; は、立体額縁で 色をa06000 太さ10ピクセル
box-shadow:
4px 4px 6px gray; 四角い影で右・下に４ピクセル ぼかしが6ピクセルで色がグレーの影
background:
url(http://winboys.net/digicame/csstest/bg.gif);padding: 10px; は、背景画像 アドレス で余白10ピクセルの画像枠で埋め込む という意味です。
上二つは、タグでも指定できますが、CSSの方が応用が広いです。
●画像を円弧で切る
border-radius:
50% 50% 0 50% を使うと、3方向を1/4円で切る画像が表示できます。すべて50%にすると、円形に切ります。これを組み合わせて、4つの画像を花びらのように並べるCSSが以下のサンプルです。これは、配置もあるので、スタイルシートにまとめて、classで指定しています。
<style>
.clover {
display: flex; flex-wrap: wrap; width: 420px; margin: 20px auto;}
.clover img
{margin: 5px;}
.img1 {
border-radius: 50% 50% 0 50%}
.img2 {
border-radius: 50% 50% 50% 0}
.img3 {
border-radius: 50% 0 50% 50%}
.img4 {
border-radius: 0 50% 50% 50%}
</style>
<div
class="clover">
<img class="img1"
src="http://www.winboys.net/digicame/csstest/1.jpg" alt=""
/>
<img class="img2"
src="http://www.winboys.net/digicame/csstest/2.jpg" alt=""
/>
<img class="img3"
src="http://www.winboys.net/digicame/csstest/3.jpg" alt=""
/>
<img class="img4"
src="http://www.winboys.net/digicame/csstest/4.jpg" alt=""
/>
</div>
これをコピーして、メモ帳に張り付け、htmlで保存して開いてください。
画像を、自分のところにあるものを使う場合は、200x200で作っておきます。