Home > Article > Web Front-end > How to change the size of a circle with css
How to change the size of a circle with css
- WBOYOriginal
- 2021-11-30 18:30:513149browse
In CSS, you can use the width and height attributes to change the size of the circle. The values of these two attributes must be equal, indicating the diameter of the circular element. You only need to add "width:" to the circular element. The changed diameter, height: the changed diameter;" style is enough.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
How to change the size of the circle in css
We can change the size of the circle by changing the diameter of the circle, and in css, the circle The diameter is controlled by the width and height attributes. The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
.ellipse{
width: 200px;
height: 200px;
background-color: red;
border-radius:100%;
-o-border-radius:100%;
-ms-border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;
}
.ellipse1{
width: 300px;
height: 300px;
background-color: red;
border-radius:100%;
-o-border-radius:100%;
-ms-border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;
}
</style>
</head>
<body>
<div class="ellipse"></div>
<div class="ellipse1"></div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial）
The above is the detailed content of How to change the size of a circle with css. For more information, please follow other related articles on the PHP Chinese website!