再來，橙來說明最喜歡用的指令了，就是邊框圓角的指令了，在以前，圓角的製作方式，須要利用小畫家等繪圖軟體來設定，然後當作該區塊的背景，才能有圓角的效果，如今，新版的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>
橙先將<p>設定為寬度150px、實線、背景為灰色、字體為黑色、容器為block屬性。
在設定#bord1~#bord4 ，分別設置了四種形式，其說明在程式碼的註解裡，可以看到各設定的方向，各位可看看試試！
我們來看看輸出結果吧！
在這可以做很多的變化，各位試試，可以設定很多質感的邊框喔！
沒有留言:
張貼留言