Home > Article > Web Front-end > Detailed explanation of examples of implementing border rounding in Html
Detailed explanation of examples of implementing border rounding in Html
- Y2JOriginal
- 2017-05-24 09:53:554750browse
This article mainly introduces in detail how to easily implement rounded rectangles in HTML, and tells you how to implement rounded rectangles 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 required for the css set inside the b46cfad05c522df99ad582573480c206 tag:
1.position: relative;
2. Width and height;
3Background color;
4. Border line (used to adjust the relative position of the four original corners. After adjustment, the border line can be setDelete)
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 corners in all directionsPicture)
The following is my implementation of the circle Code for corner 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>圆角制作</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.
【Related Recommendations】
2. html achieves a fixed table around and can scroll up, down, left and right
3. Detailed explanation of HTML tags commonly used in front-end development
4. Pure html code to complete the scrolling effect through the marquee tag
5. Code example of writing a personal resume in HTML
The above is the detailed content of Detailed explanation of examples of implementing border rounding in Html. For more information, please follow other related articles on the PHP Chinese website!