2012年11月20日 星期二

如何設計漂亮邊框(01)-各類邊框樣式-[border-style]


0000標題025
今天來說一下邊框,而邊框在網頁的使用其實用量還不少,主要由於在css使用後,每個標籤的設定就像容器一般,而在容器中,就可以設定每個容器的邊框樣式,以下來介紹幾種常用的邊框樣式。
邊框樣式,有實線、點、虛線、雙線等等的邊框樣式可以選擇,以下的設定中,有些在部落格還沒有說明到,容橙子在後面在一一說到,橙將一系列介紹邊框的各種用法,讓大家有基本上的了解。
我們先來寫一段html 吧!
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>魚和橙的結合</title>
</head>

<body>
<p id="bord1">border1</p>
<p id="bord2">border2</p>
<p id="bord3">border3</p>
<p id="bord4">border4</p>
<p id="bord5">border5</p>
<p id="bord6">border6</p>
<p id="bord7">border7</p>
<p id="bord8">border8</p>
</body>
</html>
 先設了一堆的id ,來分別加入css
橙先將<p>一些共用的設定放入,如下
<style type="text/css">
p {
    border-width: 1px;
    border-color: #ccc;
    display: block;
    width: 150px;
}
</style>
 橙設定了邊框共用的條件,因為本篇主要介紹邊框樣式,橙將共用的幾個條件,就放在<p>的裡面了,而裡面有設定邊框的粗細為1px,邊框的顏色為灰色,<p>容器皆為block的型式,和<p>容器的寬度為150px,這些設定,橙後面的文章也會寫,就先記著吧!
然後,橙再加入各式邊框的樣式,就加入css吧!
<style type="text/css">
#bord1 {
    border-style:dashed; /* 虛線 */
}
#bord2 {
    border-style: dotted; /* 點*/
}
#bord3 {
    border-style: double ; /*雙線*/
}
#bord4 {
    border-style: groove; /*槽線*/
}
#bord5 {
    border-style: inset; /*上陰影線 */
}
#bord6 {
    border-style: solid; /*實線*/
}
#bord7 {
    border-style: outset; /*下陰景線*/
}
#bord8 {
    border-style: ridge; /*立體線*/
}
</style>
 橙將每個 #bord 都利用 border-style 設定了一個樣式,而輸出即會產生不同的結果,而在上面都有用註解說明該屬性的結果,其中,橙比較常用的就是實線和虛線了,實線主要用提出主題用,虛線主要用於下邊框用,咋用呢?就是在文章中,不都有分類細類嗎?可以利用虛線來讓使用者更快找到分類重點。
我們來看看輸出結果吧!
2012-11-20_094511  
利用這個,就可以設定你要的邊框樣式了,可以試試看喔!

沒有留言:

張貼留言