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) 人氣()