Html easily implements rounded rectangle

Html easily implements rounded rectangle

Question: How to achieve a rounded rectangle using div+css and positioning?

Solution Overview:

Content: First, add a large layer inside the <body> tag (the large layer is used to fix the overall large frame), and then the large layer contains four small layers (the four small layers are respectively filled with four rounded corners (pre-made with PS into an elliptical shape, and then cut with the slice tool))

Style: The properties of the CSS set inside the <head> tag:

1.position: relative;

2. Width and height;

3 background color;

4. Border line (used to adjust the relative positions of the four original corners. The border line setting can be deleted after adjustment)

When setting the CSS of the small layer, the properties that must be included in each layer are:

1.position: absolute;

2. Width and height;

3. Direction attributes (left, right, bottom, top)

4.background: url ("") no-repeat; (introducing rounded corner images in all directions)

Here is my code to implement the rounded rectangle:

XML/HTML CodeCopy content to clipboard
  1. <!doctype html >   
  2.   
  3. < html   lang = "en" >     
  4.   
  5.   < head >   
  6.   
  7.    < meta   charset = "UTF-8" >   
  8.   
  9.    < meta   name = "Generator"   content = "EditPlus®" >   
  10.   
  11.    < meta   name = "Author"   content = "" >   
  12.   
  13.    < meta   name = "Keywords"   content = "" >   
  14.   
  15.    < meta   name = "Description"   content = "" >   
  16.   
  17.    < title > Rounded Corner Production </ title >   
  18.   
  19.    < style   type = text /css >   
  20.   
  21. #p
  22.   
  23.     
  24.   
  25. {
  26.   
  27. position:relative;
  28.   
  29. width:400px;
  30.   
  31. height:200px;
  32.   
  33. background:black;
  34.   
  35. margin:auto;
  36.   
  37. }
  38.   
  39. #plefttop
  40.   
  41. {
  42.   
  43. position:absolute;
  44.   
  45. width:50px;
  46.   
  47. height:50px;
  48.   
  49. background:url("images/11.jpg") no-repeat;
  50.   
  51. }
  52.   
  53. #prighttop
  54.   
  55. {
  56.   
  57. position:absolute;
  58.   
  59. width:50px;
  60.   
  61. height:50px;
  62.   
  63. right:-9px;
  64.   
  65. top:0px;
  66.   
  67. background:url("images/22.jpg") no-repeat;
  68.   
  69. }
  70.   
  71. #pleftbottom
  72.   
  73. {
  74.   
  75. position:absolute;
  76.   
  77. width:50px;
  78.   
  79. height:50px;
  80.   
  81. left:0px;
  82.   
  83. bottom:-14px;
  84.   
  85. background:url("images/33.jpg") no-repeat;
  86.   
  87. }
  88.   
  89. #prightbottom
  90.   
  91. {
  92.   
  93. position:absolute;
  94.   
  95. width:50px;
  96.   
  97. height:50px;
  98.   
  99. right:-9px;
  100.   
  101. bottom:-14px;
  102.   
  103. background:url("images/44.jpg") no-repeat;
  104.   
  105. }
  106.   
  107.    </ style >   
  108.   
  109.   </ head >   
  110.   
  111.   < body >   
  112.   
  113. < div   id = p >   
  114.   
  115. < div   id = plefttop > </ div >   
  116.   
  117. < div   id = prighttop > </ div >   
  118.   
  119. < div   id = pleftbottom > </ div >   
  120.   
  121. < div   id = prightbottom > </ div >   
  122.   
  123. </ div >   
  124.   
  125. </ body >   
  126.   
  127. </ html >     
  128.   

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

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

Original link: http://www.cnblogs.com/cyn941105/p/5588940.html

<<:  Nginx implements https website configuration code example

>>:  Solution to the problem of Failed when configuring IDEA to connect to MYSQL database

Recommend

Summary of some thoughts on binlog optimization in MYSQL

question Question 1: How to solve the performance...

Detailed explanation of cocoscreater prefab

Table of contents Prefab How to create a prefab T...

Example of how to install kong gateway in docker

1. Create a Docker network docker network create ...

Docker installation of MySQL (8 and 5.7)

This article will introduce how to use Docker to ...

Centos7.4 server installation of apache and solutions to problems encountered during the installation process

This article describes how to install Apache on a...

Native JS to achieve special effects message box

This article shares with you a special effect mes...

Problems and solutions when replacing Oracle with MySQL

Table of contents Migration Tools Application tra...

Vue uses openlayers to load Tiandi Map and Amap

Table of contents 1. World Map 1. Install openlay...

Discussion on default margin and padding values ​​of common elements

Today we discussed the issue of what the margin v...

Vue implements div wheel zooming in and out

Implement div wheel zooming in and out in Vue pro...

22 Vue optimization tips (project practical)

Table of contents Code Optimization Using key in ...

Detailed explanation of COLLATION examples in MySQL that you may have overlooked

Preface The string types of MySQL database are CH...

How to shrink the log file in MYSQL SERVER

The transaction log records the operations on the...

5 Ways to Clear or Delete Large File Contents in Linux

Sometimes, while working with files in the Linux ...

Detailed explanation of Linux command unzip

Table of contents 1. unzip command 1.1 Syntax 1.2...