>>  常見問題
>>  課程問題
>>  免費試學



  
 
所在位置:石家莊動漫軟件職業技術學校 >> 招生問答 >> 課程問題
圓角邊框CSS如何實現?
作者: 來源: 點擊數:1492 更新時間:2013-2-13 15:57:26   

圓角邊框可以用圖片實現,也可以用 CSS 實現。如果用圖片做的話,就畫好圓角然后設置 成背景圖片。用 CSS 不需要圖片,直接用代碼定義顏色。用圖片的話,會影響網頁打開速 度,當然如果圖片不大,影響也并不明顯。用 CSS 不會影響網頁打開速度,但是實現方法 略麻煩,要寫不少代碼。不好講哪個更好哪個更差,用到各自適合的地方就行了。
  
這里介紹兩種不用圖片,直接用 CSS 實現圓角邊框的方法。兩種 CSS 方法原理類似,都是 在一個層上加二個或更多層,不過這些層只有左右邊線,上邊線和下邊線有背景色,都有一 定的長度差距差,從而呈現出圓角邊框的效果。
方法一: CSS 樣式定義,放在網頁前部。綠色字是注釋,紅色字是可自行更改的顏色編碼。 <style type="text/css">
<!--1.定義框內背景色為藍色#0080FF-->
div.RoundedCorner{background: #0080FF}
<!--2.定義方框四角的顏色#FFFFFF,應該設置成與整體頁面背景色相同,才能融入背景, 使框呈現出圓角形狀-->
b.rtop, b.rbottom{display:block;background: #FFFFFF}
<!--3.定義圓角框邊框顏色,應該設置成與 1.框內背景色相同的顏色,即藍色-->
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #0080FF}
<!--4.定義圓角弧度,直接拷貝即可-->
b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
引用以上定義的樣式,在網頁中顯示圓角邊框。綠色字是注釋。
<!--1.定義層,引用樣式,生成圓角邊框,直接拷貝即可-->
<div class="RoundedCorner"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r4"></b></b>
<!--2.定義圓角框里面顯示的內容,可根據需要自行修改-->
<br>CSS 圓角邊框,無圖片實現方法<br><br>
<!--3.定義層,引用樣式,生成圓角邊框,直接拷貝即可-->
class="r3"></b><b
<b class="rbottom"><b class="r1"></b></b> </div> 效果如圖所示:
class="r4"></b><b
class="r3"></b><b
class="r2"></b><b

你還有什么方法?


      友情提示:如果您正在為就業難而煩惱,如果您想跳槽轉行而不知該如何決擇,如果您因激烈的職業競爭而想充電學習,請點擊在線客服,或者撥打0311—87162121 87162112我們會有專業的職業規劃老師為您解除困惑!

 

上一篇:網站優化如何去做?
下一篇:如何學習Linux更有效?
[在線報名] [打印此文] [關閉窗口]
版權所有 石家莊清美動漫軟件職業技術學校
傳真:0311-87162110-8010 郵箱:hbbeneter@sina.com 冀ICP備16001955號-2
校址:石家莊市建設北大街東海國際 電話:400-800-5730 0311-87162121 87612112
欧美图亚洲色另类色在线_欧美大胆无码视频_欧美 av亚洲 av国产 制服