0000標題028

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

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

2012-11-21_153031  

以上是支援的版本，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>

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

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

我們來看看輸出結果吧！

2012-11-21_153714  

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

arrow
arrow
    文章標籤
    邊框
    全站熱搜
    創作者介紹
    創作者 雲橙雨林 的頭像
    雲橙雨林

    雲橙雨林

    雲橙雨林 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄