1. The pt units

  • Pt Points: absolute unit of length.
  • A unit commonly used in the printing industry, the pound, usually used for typesetting pages.
  • 1 = 2.54 cm = = 101.6 25.4 mm in q = 72 = 96 px pt = 6 PCS

On the formation of rounded corners:

  1. From the top of the specified teaching, the vertical radius and horizontal radius are drawn inward
  2. Compare the horizontal and vertical radii to a point inside the element (the central point)
  3. With this point as the center of the circle, draw a circle or ellipse with the specified vertical and horizontal radii
  4. The part that intersects the border is the rounded corner

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> <style>. Demo {/* border-top-left-radius: 55pt 25pt; border-top-right-radius: 55pt 25pt; border-bottom-right-radius: 55pt 25pt; border-bottom-left-radius: 55pt 25pt; */ /* equivalent to */ border-radius: 55pt/25pt; border: 5px solid blue; width: 500px; height: 500px; background-color: #f00; } #one { border-radius: 10px 20px 30px 40px; width: 200px; height: 200px; background-color: #fff; border: 2px solid green; } #tow { border-radius: 10pt 20pt 30pt 40pt; */ /* border-radius: 10pt/20pt 20pt/30pt 30pt/40pt 40pt/50pt; */ width: 200px; height: 200px; background-color: #fff; border: 2px solid green; } #three { border-radius: 10px 50px 30px; width: 200px; height: 200px; background-color: #fff; border: 2px solid green; } #four { /* border-radius: 50px 30px; */ /* border-radius: 10pt / 40pt 50pt; */ /* equivalent to */ /* border-radius: 10pt / 40pt; */ /* pt last invalid */ /* border-radius: 10px / 10px 50px; */ /* equivalent to: */ /* border-radius: 10px / 10px 50px; */ /* border-radius: 10px 10px / 10px 50px; */ /* If the second parameter value is omitted, the first parameter value is directly copied. */ /* border-radius: 10px 20px ; */ /* equivalent to */ /* border-radius: 10px 20px / 10px 20px; */ /* border-radius: 10px 20px / 2px 50px; */ /* border-radius: 10px 20px 30px / 10px 50px ; */ /* equivalent to */ /* border-radius: 10px 20px 30px 20px / 10px 50px 10px 50px; */ /* border-radius: 50px / 10px 60px; */ /* border-radius: 50px / 10px 60px; Border-radius: 50px 60px/ 10px 60px; border-radius: 50px 60px/ 10px 60px; width: 200px; height: 200px; background-color: #fff; border: 2px solid green; } #five { /* 72pt = = 96px */ /* width: 96px; */ /* height: 96px; */ width: 72pt; height: 72pt; background-color: red; } </style> </head> <body> <div class="demo"> <! -- The border-radius property provides two parameters, separated by slights (/). Each parameter allows one to four values. The first parameter indicates the horizontal radius or half-axis, and the second parameter indicates the vertical radius or half-axis. -- > <! -- Four parameter values --> <! -- top right bottom left --> <! -- Three values --> <! -- top left symmetric (top right and bottom left) downstream --> <! -- Two --> <! -- Symmetric (top-left and bottom-right) --> <! -- Only one, Will be used in all four corners - > < / div > < div id = "one" > < / div > < div id = "tow" > < / div > < div id = "three" > < / div > < div id = "four" > < / div > < div id="five"></div> <! - Pt unit name is called Point, absolute length unit. Generally, the old version of table used length unit, but it is almost not used now. --> </body> </html>Copy the code

Case study:

<! <div style=" background-color: blue; width: 100px; height: 200px; border:2px solid teal; border-left: 100px solid yellow; border-radius: 100px;" ></div> </body>Copy the code