ikanagos diary

日記の写真に枠(ホーダー編)


ボーダー（枠線）を日記の写真でためしてみよう

とほほのWWW入門より引用

種類
none（線無し）
solid（実線）
double（二重線）
dotted（点線）
dashed（粗い点線）
groove（谷線）
ridge（山線）
inset（内線）
outset（外線）
inherit（継承)

ブラウザによって見え方に違いがあります
ためしたのはIE6とfirefox2です



<img src="画像のアドレス" width="○○" height="○○" alt="○○" style="border: ボーダーの幅 ボーダーの種類 ボーダーの色#○○○○○○など;" />　

□実験では　alt width height は省略　色は名前で指定しています


■何もなし



■solid (実線)
　▽タグ<img src="画像のアドレス" style="border: 5px solid yellow;" />　



■double（二重線）
　▽タグ<img src="画像のアドレス" style="border: 6px double blue;" />　



■dotted（点線）
　▽タグ<img src="画像のアドレス" style="border: 10px dotted blue;" />　
　IE6では●ですがfirefox2 operaは■です



■dashed（粗い点線）
　▽タグ<img src="画像のアドレス" style="border: 10px dashed yellow;" />　




■groove（谷線）
　▽タグ<img src="画像のアドレス" style="border: 10px groove yellow;" />　



■ridge（山線）
　▽タグ<img src="画像のアドレス" style="border: 10px ridge yellow;" />　



▽タグ<img src="画像のアドレス" style="border: 10px ridge maroon;" />　



■inset（内線）
　firefox2 operaでは　下記のsolidで場所ごとに色変え2のような感じでみえます
　▽タグ<img src="画像のアドレス" style="border: 10px inset yellow;" />　



■outset（外線）
　firefox2 operaでは　下記のsolidで場所ごとに色変え1のような感じでみえます
　▽タグ<img src="画像のアドレス" style="border: 10px outset yellow;" />　




■solidで場所ごとに色変え1
IE6 firefox2 operaでも同じように見えます
outset指定のときfirefox2 operaはこんな感じでみえてます 色は変えてます
　▽タグ<img src="画像のアドレス" style="border: 15px solid ; border-color:limegreen darkgreen darkgreen limegreen;" />　




■solidで場所ごとに色変え2
IE6 firefox2 operaでも同じように見えます
inset指定のときfirefox2 operaはこんな感じでみえてます
　▽タグ<img src="画像のアドレス" style="border: 15px solid ; border-color:#8d8d00 #ffffb2 #ffffb2 #8d8d00;" />　




■solid 別タイプ
　▽タグ<img src="画像のアドレス" style="border: 15px solid ; border-color:#8d8d00 #ffffb2;" />