Home >Web Front-end >CSS Tutorial >How to modify a div into a circle with css
How to modify a div into a circle with css
- 藏色散人Original
- 2020-12-30 09:23:583968browse
Css method to modify div into a circle: first create a new html file; then enter "1331fce85752e1268a1f748c03848cfe16b28748ea4df4d9c2150843fecfba68" in the body tag; finally in the head table Add the style tag and add the "border-radius" attribute.
The operating environment of this tutorial: Dell G3 computer, Windows 7 system, HTML5&&CSS3 version.
Recommended: "css video tutorial"
css modifies div into a circle
1. Open the code editor, Create a new html file and write the basic structure
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>2. Enter in the body tag: 1331fce85752e1268a1f748c03848cfe16b28748ea4df4d9c2150843fecfba68. The div here is used to draw circles. Tag of. (Recommended learning: CSS video tutorial)
<body>
<div class="circle"></div>
</body>3. Add the style tag to the head table and enter the following code
<style>
.circle{
width: 200px;
height: 200px;
border-radius: 100px;
background-color: #1EFD0C;
}
</style>5. Save the code and open the browser to see the circle.
Implementation principle: Set the width and height to be the same, and then set the rounded corners to half of the width and height. A more convenient way is to directly set the rounded corners to 50%.
The above is the detailed content of How to modify a div into a circle with css. For more information, please follow other related articles on the PHP Chinese website!