Html easily implements rounded rectangle

Question: How to achieve a rounded rectangle using div+css and positioning?

Solution Overview:

Content: First, add a large layer inside the <body> tag (the large layer is used to fix the overall large frame), and then the large layer contains four small layers (the four small layers are respectively filled with four rounded corners (pre-made with PS into an elliptical shape, and then cut with the slice tool))

Style: The properties of the CSS set inside the <head> tag:

1.position: relative;

2. Width and height;

3 background color;

4. Border line (used to adjust the relative positions of the four original corners. The border line setting can be deleted after adjustment)

When setting the CSS of the small layer, the properties that must be included in each layer are:

1.position: absolute;

2. Width and height;

3. Direction attributes (left, right, bottom, top)

4.background: url ("") no-repeat; (introducing rounded corner images in all directions)

Here is my code to implement the rounded rectangle:

XML/HTML CodeCopy content to clipboard

<!doctype html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "Generator" content = "EditPlus®" >
< meta name = "Author" content = "" >
< meta name = "Keywords" content = "" >
< meta name = "Description" content = "" >
< title > Rounded Corner Production </ title >
< style type = text /css >
#p
{
position:relative;
width:400px;
height:200px;
background:black;
margin:auto;
}
#plefttop
{
position:absolute;
width:50px;
height:50px;
background:url("images/11.jpg") no-repeat;
}
#prighttop
{
position:absolute;
width:50px;
height:50px;
right:-9px;
top:0px;
background:url("images/22.jpg") no-repeat;
}
#pleftbottom
{
position:absolute;
width:50px;
height:50px;
left:0px;
bottom:-14px;
background:url("images/33.jpg") no-repeat;
}
#prightbottom
{
position:absolute;
width:50px;
height:50px;
right:-9px;
bottom:-14px;
background:url("images/44.jpg") no-repeat;
}
</ style >
</ head >
< body >
< div id = p >
< div id = plefttop > </ div >
< div id = prighttop > </ div >
< div id = pleftbottom > </ div >
< div id = prightbottom > </ div >
</ div >
</ body >
</ html >

Note: The CSS style used in my code is inline. There are three types of CSS styles: inline, embedded, and external.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

Original link: http://www.cnblogs.com/cyn941105/p/5588940.html

<<: Nginx implements https website configuration code example

>>: Solution to the problem of Failed when configuring IDEA to connect to MYSQL database