人氣 383°c

CSS雙線圓邊框兩條線顏色各不同

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▼

標籤: