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

MySQL Series 10 MySQL Transaction Isolation to Implement Concurrency Control

Table of contents 1. Concurrent access control 2....

Detailed explanation of various types of image formats such as JPG, GIF and PNG

Everyone knows that images on web pages are genera...

JavaScript to implement login slider verification

This article example shares the specific code of ...

How to use vue3 to build a material library

Table of contents Why do we need a material libra...

vue-admin-template dynamic routing implementation example

Provide login and obtain user information data in...

Summary of things to pay attention to in the footer of a web page

Lots of links You’ve no doubt seen a lot of sites ...

Installation method of MySQL 5.7.18 decompressed version under Win7x64

Related reading: Solve the problem that the servi...

Detailed explanation of Angular data binding and its implementation

Table of contents Preface What is data binding? T...

Install and build a server environment of PHP+Apache+MySQL on CentOS

Yum (full name Yellow dog Updater, Modified) is a...

MySQL cleverly uses sum, case and when to optimize statistical queries

I was recently working on a project at the compan...

Quickly solve the Chinese input method problem under Linux

Background: I'm working on asset reporting re...

Three solutions for sub-functions accessing external variables in JavaScript

Preface When we write web pages, we will definite...

mysql method to view the currently used configuration file my.cnf (recommended)

my.cnf is the configuration file loaded when MySQ...

Vue implements video upload function

This article example shares the specific code of ...

Sharing of research experience on using characters instead of rounded corners and sharp corners

1. The relationship between fonts and character d...