CSS 經常使用「Border」做成邊框樣式，如果想將裡面及外面的雙線顏色各不一樣，如同星戰Star Wars效果，就需要花一些技巧了。

知道大部份人會使用背景圖片做出來，這次雙行邊框純使用CSS代碼，使得每行有不同顏色。

Border樣式：
實線 solid

虛線 dashed

雙線 double

點線 dotted

凹線 groove

凸線 ridge

嵌入線 inset

浮出線 outset

樣式一：

<style type="text/css">
.box-a { padding: 5px;    outline: 5px dashed #FFD306;    border: 5px solid #8CEA00;}
</style>
<span class="box-a">美女</span>
<br />
<br />
<br />
<br />
<div class="box-a">美女</div>

樣式二：

<style type="text/css">
.box-b { padding: 5px; border-radius: 10px; border: 5px solid #FFDC35; box-shadow: 0 0 0 5px #FF5151;}
</style>
<span class="box-b">野獸</span>
<br />
<br />
<br />
<br />
<div class="box-b">野獸</div>

代碼測試︰ http://www.ifreesite.com/runcode.htm
預覽效果Demo▼