Html easily implements rounded rectangle example-HTML Tutorial-php.cn

Html easily implements rounded rectangle example

高洛峰

Release： 2017-03-12 17:05:49

Original

2902 people have browsed it

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 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 <head> 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>

Copy after login

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!