技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

純CSS實(shí)現(xiàn)圓角樣式的4種寫法，比CSS3兼容性更好

作者:admin    時(shí)間:2017-7-24 17:5:59    瀏覽:

在前文中介紹過CSS3實(shí)現(xiàn)圓角的方法，代碼更少更簡單，不過由于其不兼容IE8瀏覽器，所以就目前IE8仍然占一定用戶比例的情況下，CSS3要完全取代CSS還不太現(xiàn)實(shí)。因此本文將介紹純CSS實(shí)現(xiàn)圓角的4種寫法，該方法對比CSS3的優(yōu)勢是不用考慮瀏覽器的兼容問題。

 純CSS實(shí)現(xiàn)圓角

純CSS實(shí)現(xiàn)圓角

實(shí)例一

html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>純CSS實(shí)現(xiàn)圓角，比CSS3兼容性更好</title>
<style>
.wrap{font:14px Arial,sans-serif; color:#fff;}
.wrap .divide{height:20px;}

.floatMethod{  
   width:350px;   
   height:32px;  
   background:url('images/roundBox_middle.gif') left top repeat-x;
}
.floatMethod .middle{  
   float:left;   
   line-height:32px;   
   padding:0 0 0 10px;
}
.floatMethod .left{
   float:left;
   width:6px;
   height:32px;   
   background:url('images/roundBox_left.gif') left top no-repeat;
}
.floatMethod .right{
   float:right;
   width:8px;
   height:32px;
   background:url('images/roundBox_right.gif') left top no-repeat;
}

</style>
</head>

<body>
<div class="wrap">
  <div class="floatMethod">
    <div class="left"></div>
    <div class="middle">實(shí)例1</div>
    <div class="right"></div>
  </div>
</div>
</body>
</html>

execcodegetcode

代碼分析：

1） 需要用到3張圖片，分別是左圓角、右圓角和中間背景圖。

2）.left .middle .right 左中右三層排列均使用 float 浮動屬性。

實(shí)例二

html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>純CSS實(shí)現(xiàn)圓角，比CSS3兼容性更好</title>
<style>
.wrap{font:14px Arial,sans-serif; color:#fff;}
.wrap .divide{height:20px;}

.newFloatMethod{
  width:350px;
  height:32px;
}
.newFloatMethod .middle{
  line-height:32px;
  margin:0 8px 0 6px;
  padding:0 0 0 10px;
  background:url('images/roundBox_middle.gif') left top repeat-x;
}
.newFloatMethod .left{
  float:left;
  width:6px;
  height:32px;
  background:url('images/roundBox_left.gif') left top no-repeat;
}
.newFloatMethod .right{
  float:right;
  width:8px;
  height:32px;
  background:url('images/roundBox_right.gif') left top no-repeat;
}

</style>
</head>

<body>
<div class="wrap">
  <div class="newFloatMethod">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle">實(shí)例2</div>
  </div>
</div>
</body>
</html>

execcodegetcode

代碼分析：

1）跟實(shí)例1一樣，同樣需要3張圖片，分別是左圓角、右圓角和中間背景圖。

2）跟實(shí)例1不同的是，這里的 .middle 中間層不再使用 float 浮動層了。

實(shí)例三

html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>純CSS實(shí)現(xiàn)圓角，比CSS3兼容性更好</title>
<style>
.wrap{font:14px Arial,sans-serif; color:#fff;}
.wrap .divide{height:20px;}

.slidingDoorMethod{
  width:350px;
  height:32px;
  background:url('images/roundBox_left.gif') left top no-repeat;
}
.slidingDoorMethod .inner{
  line-height:32px;
  margin:0 0 0 6px;
  padding:0 0 0 10px;
  background:url('images/roundBox_slidingDoor_right.gif') right top no-repeat;
}

</style>
</head>

<body>
<div class="wrap">
  <div class="slidingDoorMethod">
    <div class="inner">實(shí)例3</div>
  </div>
</div>
</body>
</html>

execcodegetcode

代碼分析：

1）同樣該方法需要圖片來配合，不過這里僅需要兩張圖片即可，不像前兩種方法要3張圖片。

2）這個(gè)方法代碼也更少。使用了一個(gè)內(nèi)嵌標(biāo)簽 .inner ，外部標(biāo)簽 .slidingDoorMethod 為左圓角，內(nèi)嵌的標(biāo)簽 .inner 包含了背景與右圓角。

實(shí)例四

html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>純CSS實(shí)現(xiàn)圓角，比CSS3兼容性更好</title>
<style>
.wrap{font:14px Arial,sans-serif; color:#fff;}
.wrap .divide{height:20px;}

.negativeMarginMethod{
  width:350px;
  height:32px;
}
.negativeMarginMethod .topLeft{
  height:5px;
  _overflow:hidden;
  background:url('images/roundBox_negativeMargin.gif') left top no-repeat;
}
.negativeMarginMethod .topRight{
  height:5px;
  _overflow:hidden;
  margin:-5px 0 0 5px;
  background:url('images/roundBox_negativeMargin.gif') right top no-repeat;
}
.negativeMarginMethod .title{
  line-height:28px;
  padding:0 0 0 15px;
  background:url('images/roundBox_middle.gif') left top repeat-x;
}

</style>
</head>

<body>
<div class="wrap">
  <div class="negativeMarginMethod">
    <div class="topLeft"></div>
    <div class="topRight"></div>
    <div class="title">實(shí)例4</div>
  </div>
</div>
</body>
</html>

execcodegetcode

代碼分析：

1）該方法也要用到2張圖片。

2）主要利用負(fù)Margin 技術(shù)（margin:-5px 0 0 5px;）讓倆個(gè)div 重疊，巧妙設(shè)計(jì)出倆個(gè)圓角，實(shí)現(xiàn)出圖片圓角效果。

總結(jié)

上面介紹了純CSS實(shí)現(xiàn)圓角樣式效果的4種寫法，這些方法都要用到圓角圖片來輔助完成。在使用這些方法前，要制作好相應(yīng)的圓角圖片和背景圖片，因此要求你懂一點(diǎn)圖片制作技術(shù)。

就實(shí)現(xiàn)代碼而言，實(shí)例3是代碼最少的，圖片也只需要兩張，因此只值得推薦的寫法。

CSS+圖片實(shí)現(xiàn)圓角的樣式效果，不受瀏覽器限制，這是其相對于CSS3的優(yōu)點(diǎn)。但隨著IE8用戶日漸減少，可以預(yù)見，CSS3的寫法將會越來越多人采用，畢竟其寫法十分簡單，掌握起來也更加容易，更難得的是，它不再需要制作額外的圖片來配合了。

本文實(shí)例演示

demodownload

相關(guān)文章推薦

標(biāo)簽: css  css3  圓角  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */