如何使用Css實現圓角邊框的效果-css教學-PHP中文網

這篇文章主要介紹了關於如何使用Css實現圓角邊框的效果，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

#一、CSS3圓角的優點

　　傳統的圓角生成方案，必須使用多張圖片作為背景圖案。 CSS3的出現，使得我們再也不必浪費時間去製作這些圖片了，而且還有其他多個優點：

　　* 減少維護的工作量。圖片檔案的產生、更新、編寫網頁程式碼，這些工作都不再需要了。

　　* 提升網頁效能。由於不必再發出多餘的HTTP請求，網頁的載入速度將會變快。

　　* 增加視覺可靠度。某些情況下（網路壅塞、伺服器出錯、網速過慢等等），背景圖片會下載失敗，導致視覺效果不佳。 CSS3就不會發生這種情況。

　　二、border-radius屬性

#　　CSS3圓角只需設定一個屬性：border-radius（意義是"邊框半徑"）。你為這個屬性提供一個值，就能同時設定四個圓角的半徑。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

　　例如，下面是div方框：

　　現在設定它的圓角半徑為15px：

　　border-radius: 15px;

如何使用Css實現圓角邊框的效果

　　border-radius可以同時設定1到4個值。如果設定1個值，表示4個圓角都使用這個值。如果設定兩個值，表示左上角和右下角使用第一個值，右上角和左下角使用第二個值。如果設定三個值，表示左上角使用第一個值，右上角和左下角使用第二個值，右下角使用第三個值。如果設定四個值，則依序對應左上角、右上角、右下角、左下角（順時針順序）。

　　border-radius: 15px 5px;

　　border-radius: 15px 5px 25px;

# #　　border-radius: 15px 5px 25px 0px;

　　（左下角的半徑為0，就變成直角了。）

　　border-radius還還差border-radius還還不錯可以用斜線設定第二組值。這時，第一組值表示水平半徑，第二組值表示垂直半徑。第二組值也可以同時設定1到4個值，應用規則與第一組值相同。

　　border-radius: 15px 5px / 3px;

　　border-radius: 15px 5px 25px / 3px 5px

#　　border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;

　　三、單一圓角的設定

##」單一圓角的設置

#　　除了同時設定四個圓角以外，還可以單獨對每個角落進行設定。對應四個角，CSS3提供四個單獨的屬性：

　　* border-top-left-radius
　　* border-top-right-radius
　　* border-bottom-right-radius
　　* border-bottom-left-radius

　　這四個屬性都可以同時設定1到2個值。若設定1個值，表示水平半徑與垂直半徑相等。若設定2個值，第一個值表示水平半徑，第二個值表示垂直半徑。

　　border-top-left-radius: 15px;

　　border-top-left-radius: 15px 5px;

#################################################################################################################### ##########　　四、瀏覽器支援#########　　IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4，都支援上述的border-radius屬性。早期版本的Safari和Chrome，支援-webkit-border-radius屬性，早期版本的Firefox支援-moz-border-radius屬性。 ######　　目前來看，為了確保相容性，只需同時設定-moz-border-radius和border-radius即可。 ###

-moz-border-radius: 15px;
　　border-radius: 15px;

登入後複製

###　　（注意：border-radius必須放在最後聲明，否則可能會失效。）###

　　另外，早期版本Firefox的单个圆角的语句，与标准语法略有不同。

　　* -moz-border-radius-topleft（标准语法：border-top-left-radius）
　　* -moz-border-radius-topright（标准语法：border-top-right-radius）
　　* -moz-border-radius-bottomleft（标准语法：border-bottom-left-radius）
　　* -moz-border-radius-bottomright（标准语法：border-bottom-right-radius）

　　五、注意事项

　　虽然各大浏览器都支持border-radius，但是在某些细节上，实现都不一样。当四个角的颜色、宽度、风格（实线框、虚线框等）、单位都相同时，所有浏览器的渲染结果基本一致；一旦四个角的设置不相同，就会出现很大的差异。比如，下面这段代码在不同的浏览器中，渲染结果就相差很大。

border-color: black;
　　border-style: solid dashed;
　　border-width: 1px 2px 3px;
　　border-top-color: red;
　　border-radius: 5%;

登入後複製

　　另外，并非所有浏览器，都支持将圆角半径设为一个百分比值。

　　因此，目前最安全的做法，就是将每个圆角边框的风格和宽度，都设为一样的值，并且避免使用百分比值。

以上是CSS3的写法

如下是传统的css圆角边框的代码：

<html>
<head>
<style>
#a{
    border-left:1px #333 solid;
    border-right:1px #333 solid;
    width:300px;
    height:200px;
    background:#99FFFF;
}
.b{
    height:1px;
    overflow:hidden;
    border-left:1px #333 solid;
    border-right:1px #333 solid;
    background:#99FFFF;
}
textarea{
    width:294px;
    height:200px;
    background:#99FFFF;
    border:0;
    border-color:#99FFFF;
    overflow:hidden;
}
</style>
</head>
<body>
<div>
    
    <div class="b" style="margin-left:3px;width:294px;background:#333"></div>
    
    <div class="b" style="margin-left:2px;width:296px;"></div>
    <div class="b" style="margin-left:1px;width:298px"></div>

    <div id="a">
    <textarea>
    以我的能力，纯DIV+CSS实现的效果只能做到这样了。这里是放置内容的地方，自己看一看代码的规律，很容易明白。

    代码很简单，a层为放置内容的层，其width值为300，然后向外以2像素的宽度递减,用一个像素来控制圆角。最外一层要加上background为个属性，目的是要将上、下两线条呈现出来。

    这里实现了3像素的圆角边框，b层的数量决定了要实现多少个像素边框。建议不要多于3层，最好是2层，即2像素圆角边框，或者1层，因为层数越多，圆角的表现就越不圆滑。在firefox  IE6 都通过测试。
    </textarea>
    </div>
    <div class="b" style="margin-left:1px;width:298px"></div>
    <div class="b" style="margin-left:2px;width:296px;"></div>
    <div class="b" style="margin-left:3px;width:294px;background:#333"></div>

</div>
</body>
</html>

---------------------------------------------------------------

<html>
 <head>
   <style type="text/css">
   
   u.corner u
   {
       height: 1px;
       font-size:1px;
       display: block;
       overflow: hidden;
       text-decoration: none;
       border-color:#CC0033;
       border-style:solid;
   }
  
   u.corner u.h1{margin: 0 5px;} 
   u.corner u.h2{margin: 0 3px;}
   u.corner u.h3{margin: 0 2px;}
   u.corner u.h4{margin: 0 1px; height: 2px}
   /*
     用一个像素的点和控制边距控制显示位置。这个缺点是只能通过背景色来控制。不能设置边框
   */
   </style>
 <head>
 <body>
   <div> 
   <u class="corner"><u class="h1"></u><u class="h2"></u><u class="h3"></u><u class="h4"></u></u>
     <div style="border-color:#CC0033;border-style:solid; height: 210;border-width:0 1px;">content</div>
   <u class="corner"><u class="h4"></u><u class="h3"></u><u class="h2"></u><u class="h1"></u></u>
   </div>
 </body>

</html> 

========================================
<fieldset style="width:500px;">
  <legend>
  标题圆角效果
  </legend>
  内容比DIV好的圆角效果
</fieldset>


--------------------------------------
<style type="text/css">

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}


</style>

<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<h1>Snazzy Borders</h1>
<p>Based on Nifty Corners By Alessandro Fulciniti<br />http://pro.html.it/esempio/nifty/</p>

content
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

登入後複製