雲橙雨林: 邊框設定

顯示具有 邊框設定 標籤的文章。顯示所有文章

2012年11月26日星期一

如何設計漂亮邊框(04)-邊框圓角設定-[border-radius]

再來，橙來說明最喜歡用的指令了，就是邊框圓角的指令了，在以前，圓角的製作方式，須要利用小畫家等繪圖軟體來設定，然後當作該區塊的背景，才能有圓角的效果，如今，新版的css3來說，就不須要這樣麻煩了，僅須在css裡設定，即可以表現圓角的效果。

因為這個為css3的設計，設計時還是要考量瀏灠器版本的問題喔！以下是支援的表格

以上是支援的版本，ie 8 不支持喔！還是要注意一下喔，他的使用者最多（目前來說）！

橙喜歡圓角的感覺，特別在一些設計的版面，圓角的設定，讓整個畫面有了質感的感覺（個人覺得啦），特別現在有許多東西，都特愛用圓角的設定來表現，許多的手機不是都愛如此嗎？ iphoto 不也愛用哈哈

離題了，橙還是來寫一段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>

再來加入css 吧！

<style type="text/css">
p {
    display: block;
    width: 150px;
    border-style: solid;
    background-color: #CCC;
    color: #000;
}
#bord1 {
    border-radius: 5px; /*左上、左下、右上、右下設定為5px*/
}
#bord2 {
    border-radius: 3px 10px; /*左上、右下設 3px 及 右上、左下設 10px*/
}
#bord3 {
    border-radius: 4px 5px 10px; /*左上設4px 及 右上、左下設5px 及 右下設10px*/
}
#bord4 {
    border-radius: 1px 3px 0px 10px; /*左上設1px 及 右上設3px 及 右下設0px , 左下設 10px*/
}
</style>

橙先將設定為寬度150px、實線、背景為灰色、字體為黑色、容器為block屬性。

在設定#bord1~#bord4 ，分別設置了四種形式，其說明在程式碼的註解裡，可以看到各設定的方向，各位可看看試試！

我們來看看輸出結果吧！

在這可以做很多的變化，各位試試，可以設定很多質感的邊框喔！

2012年11月23日星期五

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

之前，橙都是以全部的邊框來設定，當然，有時候，我們不需要四個邊都需要設定，只須要一個邊來表示時，此時，我們可以指定我們要的方向來設定，無須四個邊都要設定。

而設定的方式，僅須要以 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 加入了一些條件，橙將標籤中設立了寬度為150px，容器屬性為block(區塊)。

而在bord1 加入了border-top-color 為紅色，border-top-style 為虛線，border-top-style為1px寬，各位看下去，其實設定的方式就是將前幾篇所說的，中間加入了方向名詞，即可產生你要的效果。

所以，#bord2~#bord4 就分別修改下、左、右的屬性，我們就來看看，我們修改的結果吧！

是不是就改成你要結果的呢？可以試試看喔！

2012年11月21日星期三

如何設計漂亮邊框(02)-邊框顏色及粗細-[border-width][border-color]

由前篇介紹了邊框的樣式，我們再來說明前篇未說明的部份，就是邊框的粗細及顏色，他們的屬性分別為 border-width 及 border-color ，而我們就依上篇例子，再來做點修正吧！

由前篇的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>

再來橙將邊框都設定為實線，宽度150px ，容器為 block ，加入基本css 吧！

<style type="text/css">
p {
    display: block;
    width: 150px;
    border-style: solid;
}
</style>

再來橙將#bord1~#bord4 都加上寬度的屬性和顏色的屬性，來看看其中差異吧，加入css吧！

<style type="text/css">
p {
    display: block;
    width: 150px;
    border-style: solid;
}
#bord1 {
    border-color: red;
    border-width: 1px;
}
#bord2 {
    border-color: gray;
    border-width: thin;
}
#bord3 {
    border-color: blue;
    border-width: medium;
}
#bord4 {
    border-color: black;
    border-width: thick;
}
</style>

我們可以設定顏色為各種顏色，本例中，我設了紅色、灰色、藍色、黑色，當然也可使用rgb 值，在這裡用英文顏色來表示，會比較清楚點！

而粗細方面，我們可以利用數字設定邊框粗細，也可使用thin（細）、medium（中等）、thick（粗），來設定，一般而言，橙子還是習慣用數字來表示，因為前面三個值，並不會是橙所要的粗細大小，還是用數字來設定，有時才會有橙所需要的粗細大小。

我們來看一下輸出結果吧！

輸出之後，可以看到各類線條的粗細，你可以選擇你要的粗細，設定在你的網頁中！

2012年11月20日星期二

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

今天來說一下邊框，而邊框在網頁的使用其實用量還不少，主要由於在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

橙先將一些共用的設定放入，如下

<style type="text/css">
p {
    border-width: 1px;
    border-color: #ccc;
    display: block;
    width: 150px;
}
</style>

橙設定了邊框共用的條件，因為本篇主要介紹邊框樣式，橙將共用的幾個條件，就放在的裡面了，而裡面有設定邊框的粗細為1px，邊框的顏色為灰色，容器皆為block的型式，和容器的寬度為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 設定了一個樣式，而輸出即會產生不同的結果，而在上面都有用註解說明該屬性的結果，其中，橙比較常用的就是實線和虛線了，實線主要用提出主題用，虛線主要用於下邊框用，咋用呢？就是在文章中，不都有分類細類嗎？可以利用虛線來讓使用者更快找到分類重點。

我們來看看輸出結果吧！

利用這個，就可以設定你要的邊框樣式了，可以試試看喔！

訂閱：文章 (Atom)

2012年11月26日 星期一