Elements that are frequently used in the WEB interface with a rounded corner frame. As a result, many solutions have been developed to implement the rounded corner frame. Each solution has its own advantages and disadvantages. What is better depends on your needs and the specific application environment, because it is neither absolutely good nor absolutely bad, but only suitable or not. Some time ago, I used a rounded corner frame to splice images. Let's take a look at the effect.
The effect is okay. In fact, it is very easy to achieve this effect. You only need three small pictures and a few simple codes. If you don't believe it, let's look at it.
CSS style code:
[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 Structure Code:
[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> rounded corner </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">
Username: <asp: TextBox ID = "txtName" runat = "server" CssClass = "txtbox"> </asp: TextBox> </p>
<P>
Password: <asp: TextBox ID = "txtPassword" runat = "server" TextMode = "Password" CssClass = "txtbox"> </asp: TextBox> </p>
<P>
<Asp: Button ID = "btnLogin" runat = "server" Text = "Logon"/> </p>
</Div>
</Div>
<Div id = "bottom">
</Div>
</Div>
</Form>
</Body>
</Html>
</Span>
This implementation method of the rounded corner box is simple, easy to implement, and compatible, by killing all browsers. Because the image is used for display, the rounded corner is super smooth and there is no sawtooth phenomenon. Rich performance, suitable for a variety of corner boxes with high image performance requirements. Is the most common practice of corner frame. Of course, this method also has some disadvantages, because it is made up of image stitching, so there will be some redundancy, but in general it is still a good method.
In addition to the method described today, there are many ways to achieve the effect of the rounded corner box. If you are interested, you can download the seven CSS rounded corner box solutions, I will not mention it here. In addition, the Code of this instance and the simple rounded corner box of related files are attached.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
