Css method to modify div into a circle: first create a new html file; then enter "
" 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:
. 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
