2012年11月23日 星期五

如何設計漂亮邊框(03)-邊框的上下左右關係-[border-top][border-bottom][border-left][border-right]


0000標題027  
之前,橙都是以全部的邊框來設定,當然,有時候,我們不需要四個邊都需要設定,只須要一個邊來表示時,此時,我們可以指定我們要的方向來設定,無須四個邊都要設定。
而設定的方式,僅須要以 top、bottom、left、right 來分別,再加上屬性即可,而我們先設定基本要改的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>
</body>
</html>
 此例和上篇是一樣的,而我們在#bord1~#border4 中,各別加入上下左右的條件,分別改變其id的邊框顏色、樣式及粗細,橙子將css 加入吧!
<style type="text/css">
p {
    display: block;
    width: 150px;
}
#bord1 {
    border-top-color:red;
    border-top-style:dashed;
    border-top-width:1px;
}
#bord2 {
    border-bottom-width: 1px;
    border-bottom-color: gray;
    border-bottom-style: double;
}
#bord3 {
    border-left-width: thin;
    border-left-style: double;
    border-left-color: blue;
}
#bord4 {
    border-right-width: thick;
    border-right-style: dotted;
    border-right-color: black;
}
</style>
橙子將css 加入了一些條件,橙將<p>標籤中設立了寬度為150px,容器屬性為block(區塊)。
而在bord1 加入了border-top-color 為紅色,border-top-style 為虛線,border-top-style為1px寬,各位看下去,其實設定的方式就是將前幾篇所說的,中間加入了方向名詞,即可產生你要的效果。
所以,#bord2~#bord4 就分別修改下、左、右的屬性,我們就來看看,我們修改的結果吧!
2012-11-21_144907  
是不是就改成你要結果的呢?可以試試看喔!

沒有留言:

張貼留言