首先,让我们先画一个正方形:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid;
background-color: #000;
/* margin: 100px auto;是设置水平居中 */
margin: 100px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
运行结果如下:
接着添加border-radius:50%;就可以了,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid;
background-color: #000;
/* margin: 100px auto;是设置水平居中 */
margin: 100px auto;
/* border-radius: 50%;是设置为宽度的一半,高度的一半;圆就形成啦 */
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
运行结果: