圓角框在WEB界面經常會用到的元素，正因為如此，人們也研究出了很多實現圓角框的解決方案。每種方案都有各自的優缺點，究竟哪種更好要看你的需要，看具體的應用環境，因為沒有絕對的好，也沒有絕對的不好，只有適合不適合。前段時間正好用到了圓角框，采用的是圖片拼接的方法，下面一起看看效果吧。
效果還可以吧，其實想實現這種效果很簡單，只需要三張小圖片再加上幾句簡單的代碼就可以輕松搞定，如果不信的話那就往下看。
CSS樣式代碼：
[css]
<span style="font-family: 'Microsoft YaHei'; font-size: 16px; ">#top
{
background-image: url('../images/login_bg_top.gif');
background-position: top;
background-repeat: no-repeat;
padding: 20px 30px;
}
.login
{
background-image: url("../images/login_bg_center.gif");
background-position: center;
background-repeat: repeat-y;
margin: auto;
margin-top: 160px;
}
#bottom
{
background-image: url('../images/login_bg_down.gif');
background-position: bottom;
background-repeat: no-repeat;
padding: 0px 0px 28px;
padding-left: 300px;
}
#login p
{
margin-left:500px;
}</span>
HTML結構代碼：
[html]
<span style="font-family:'Microsoft YaHei';font-size:16px;"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Login" %>
<!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 runat="server">
<title>圓角框</title>
<link href="Styles/login.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="center" class="login">
<div id="top">
<div id="login">
<p style="width: 338px">
用戶名：<asp:TextBox ID="txtName" runat="server" CssClass="txtbox"></asp:TextBox></p>
<p>
密 碼：<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="txtbox"></asp:TextBox></p>
<p>
<asp:Button ID="btnLogin" runat="server" Text="登錄" /></p>
</div>
</div>
<div id="bottom">
</div>
</div>
</form>
</body>
</html>
</span>
這種圓角框的實現方式代碼很簡單，實現起來也很容易，而且兼容性好，通殺所有浏覽器。因為采用圖片來表現，所以其圓角是超級平滑，無任何鋸齒現象。表現豐富，適用於各種對圖片表現要求較高的圓角框。是最常用的圓角框做法。當然這種方法也有缺點，因為是用圖片拼接而成，所以會有一定的冗余，不過總的來說還是一種不錯的方法。
除了今天給大家介紹的這種方法，還有很多方法可以實現圓角框的效果，有興趣的可以下載七種CSS圓角框解決方案研究一下，在此就不過多介紹了。另外再附上本實例的代碼跟相關文件簡單圓角框
