Home >Web Front-end >HTML Tutorial >Html easily implements rounded rectangle example
Html easily implements rounded rectangle example
- 高洛峰Original
- 2017-03-12 17:05:492948browse
This article mainly introduces in detail how to easily implement rounded rectangleexample in Html, and tells you how to achieve rounded rectangle through p+css and positioning? Interested friends can refer to the
question: How to achieve a rounded rectangle through p+css and positioning?
Solution overview:
Content: First add a large layer inside the 6c04bd5ca3fcae76e30b72ad730ca86d tag (the large layer is used to fix the overall frame), and then the large layer contains four small layers (place four rounded corners in each of the four small layers (use ps to make an oval shape in advance, and then use the slice tool to cut the picture))
Style: Attributes that the css set inside the b46cfad05c522df99ad582573480c206 tag must have:
1.position : relative;
2. Width and height;
3 Background color;
4. Border line (used to adjust the relative position of the four original corners. After adjustment You can delete the border line setting)
When setting the css of a small layer, the attributes that must be present in each layer are:
1.position: absolute;
2. Width and height;
3. Direction attribute (left, right, bottom,top)
4.background: url("")no-repeat;(Introducing rounded corner pictures in all directions)
The following is my code to implement a rounded rectangle:
!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>圆角制作</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>
<p id=p>
<p id=plefttop></p>
<p id=prighttop></p>
<p id=pleftbottom></p>
<p id=prightbottom></p>
</p>
</body>
</html>Note: The CSS style used in my code is inline. There are three CSS styles: inline, embedded, and external.
The above is the detailed content of Html easily implements rounded rectangle example. For more information, please follow other related articles on the PHP Chinese website!