Detailed explanation of examples of implementing border rounding in Html-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Detailed explanation of examples of implementing border rounding in Html

Y2J

May 24, 2017 am 09:53 AM

html

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

Copy after login

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

【Related Recommendations】

1. HTML Free Video Tutorial

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!

Statement of this Website

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