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

Vue implements adding, displaying and deleting multiple images

This article shares the specific code for Vue to ...

Detailed explanation of the code for querying data of a certain day, month, or year in MySQL

today select * from table name where to_days(time...

Basic knowledge of MySQL database

Table of contents 1. Understanding Databases 1.1 ...

Introduction to Docker containers

Docker Overview Docker is an open source software...

Implementation of React page turner (including front and back ends)

Table of contents front end According to the abov...

A brief introduction to Linux environment variable files

In the Linux system, environment variables can be...

Implementation of Vue large file upload and breakpoint resumable upload

Table of contents 2 solutions for file upload Bas...

Introduction to Linux compression and decompression commands

Table of contents Common compression formats: gz ...

The difference between storing full-width characters and half-width characters in MySQL

Unfortunately, the MYSQL_DATA_TRUNCATED error occ...

How to use Docker to build a tomcat cluster using nginx (with pictures and text)

First, create a tomcat folder. To facilitate the ...

How to configure MySQL scheduled tasks (EVENT events) in detail

Table of contents 1. What is an event? 2. Enable ...

Detailed steps to install Mysql5.7.19 using yum on Centos7

There is no mysql by default in the yum source of...

The principle and configuration of Nginx load balancing and dynamic and static separation

Table of contents 1. Nginx implements load balanc...

CSS naming conventions (rules) worth collecting Commonly used CSS naming rules

CSS naming conventions (rules) Commonly used CSS ...

VMware15.5 installation Ubuntu20.04 graphic tutorial

1. Preparation before installation 1. Download th...