Home  >  Article  >  Web Front-end  >  Html easily implements rounded rectangle example

Html easily implements rounded rectangle example

高洛峰
高洛峰Original
2017-03-12 17:05:492918browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn