div+css無圖邊框圓角實(shí)現(xiàn)思路及代碼
發(fā)布時(shí)間:2013-03-15 10:37:50 作者:佚名
我要評(píng)論

css 圓角邊框的出現(xiàn)結(jié)束了傳統(tǒng)使用圓角圖片的時(shí)代,接下來與大家分享下div 邊框圓角的實(shí)現(xiàn),感興趣的你可以參考下哈,希望對(duì)你有所幫助
復(fù)制代碼
代碼如下:<html>
<head>
<title>css圓角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFFFFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
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>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
無圖片實(shí)現(xiàn)圓角框
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
無圖片實(shí)現(xiàn)圓角框
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
相關(guān)文章
- 字符代替圓角尖角也是一種在不使用代碼和圖片的另類實(shí)現(xiàn)吧,本文整理了一些常用的示例,感興趣的朋友可以收藏下2013-09-12
- css圓角效果的出現(xiàn)引起了網(wǎng)友們的關(guān)注,下面以個(gè)示例為大家介紹下具體的實(shí)現(xiàn)過程,帶有注釋,新手朋友們?nèi)菀卓吹亩?/div> 2013-09-04想做個(gè)頁面用到css3的圓角和陰影效果,但ie瀏覽器不支持,之前也聽說有插件可以實(shí)現(xiàn),周六在網(wǎng)上找到了一個(gè)方法,原文如下: 但凡是前端工程師,都知道IE6,IE7,IE8不支2013-07-02
div+css用邊框?qū)崿F(xiàn)圓角矩形(多樣式)
css圓角卷起了一陣風(fēng)波,只用css來做圓角矩形的技術(shù)很早就有了,但是在網(wǎng)頁的設(shè)計(jì)過程中,我們通常用圖片實(shí)現(xiàn)圓角矩形效果?,F(xiàn)在網(wǎng)上很多關(guān)于無圖片實(shí)現(xiàn)css圓角矩形的方法,雖2013-03-25使用字符代替圖片實(shí)現(xiàn)圓角或尖角效果研究
本文將開拓性的探討如何使用字符代替圖片實(shí)現(xiàn)貌似只有圖片才能實(shí)現(xiàn)的尖角效果,或是多半使用圖片實(shí)現(xiàn)的圓角效果;本文提到的一些方法,可能在實(shí)際項(xiàng)目中并不實(shí)用,關(guān)鍵是幫2013-02-27css實(shí)現(xiàn)圖片圓角 兼容所有瀏覽器實(shí)現(xiàn)代碼
今天處理了一個(gè)頁面刷新隨機(jī)顯示圖片的功能,發(fā)現(xiàn)直角太丑,想實(shí)現(xiàn)圖片圓角,兼容所有瀏覽器,于是網(wǎng)上搜集整理了一下,拿出來和大家分享2012-12-06CSS圓角效果 -webkit-border-radius(CSS3中border-radius隱藏的威力)
border-radius:用這個(gè)屬性能實(shí)現(xiàn)圓角邊框的效果?,F(xiàn)在只有Mozilla/Firefox 和 Safari 3支持該屬性。2012-03-28實(shí)現(xiàn)的方法很簡(jiǎn)單,其實(shí)就是套2層,其中外層用長背景,內(nèi)層用短背景蓋住。拿高度自適應(yīng)來說,可以用一個(gè)div(用長背景居底鋪)嵌套一個(gè)h2(用短背景居頂鋪)標(biāo)簽2012-02-17background-postion定位與圖片結(jié)合實(shí)現(xiàn)圓角效果
background-postion 背景默認(rèn)鋪設(shè)位置的起點(diǎn)為:元素的左上角.2011-07-27矩形框在網(wǎng)頁中較為常見,不過個(gè)人覺得還是圓角框更為美觀。那么圓角框是如何用DIV+CSS來實(shí)現(xiàn)的呢?2011-07-10最新評(píng)論