borderスタイルの応用.

マウスを載せるといろいろ変化します。

CSS Style border

border 2000 中央区
border 2001 浪速区
border 2002 天王寺区
border 2003 西成区

Sample Source......................................................................>>>

<style TYPE="text/css"><!--
　　.span1{width:300;padding-left:10;background-color:azure;
        color:navy;font:14pt "Times New Roman";
        border-left:5mm solid maroon;border-right:8mm solid gray;cursor:hand}
　　.span2{width:300;padding-left:10;background-color:navy;
        color:azure;font:14pt "Times New Roman";
        border-left:10mm outset lime;border-right:8mm inset pink;cursor:hand}
--></style>
<script language="JavaScript"><!--
function Init(){
        dv1.style.color = "navy";
        dv1.style.backgroundColor = "";
        dv1.style.borderTop = "thin solid green";
        dv1.style.borderBottom = "thin solid green";
        dv1.style.borderLeft = "20 solid green";        
        dv1.style.borderRight = "100 solid green";
}
function Border1(obj,c){
        obj.style.borderLeftColor = c;
        obj.style.color = c;
        obj.style.backgroundColor = "black";
}
//--></script>
</head>
<body onload="Init();">

<div id="dv1" style="width:350px;font:16pt 'Times New Roman';text-align:center;
　　cursor:hand" onmouseover="Border1(this,'pink');" onmouseout="Init();">
　　　　<p>CSS Style border</p>
</div>
<div><p>
<span class="span1" onmouseover="this.className='span2';" 
　　onmouseout="this.className='span1';">border 2000 中央区</span><br>
<span class="span1" onmouseover="this.className='span2';"
　　 onmouseout="this.className='span1';">border 2001 浪速区</span><br>
<span class="span1" onmouseover="this.className='span2';"
　　 onmouseout="this.className='span1';">border 2002 天王寺区</span><br>
<span class="span1" onmouseover="this.className='span2';"
　　 onmouseout="this.className='span1';">border 2003 西成区</span>
</p></div>