写一个上下垂直居中,蓝黑渐变的圆形
时间: 2023-07-13 19:17:39 浏览: 46
以下是使用 HTML 和 CSS 实现上下垂直居中、蓝黑渐变的圆形的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>圆形</title>
<style>
body {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 设置高度为视窗高度 */
background: linear-gradient(to bottom, #1e90ff, #000080); /* 设置背景渐变色 */
}
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: white;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
```
解释一下代码:
- 使用 `display: flex` 和 `justify-content: center` 可以使圆形水平居中。
- 使用 `align-items: center` 可以使圆形垂直居中。
- 使用 `height: 100vh` 可以使页面高度占满整个视窗。
- 使用 `background: linear-gradient(to bottom, #1e90ff, #000080)` 可以设置蓝黑渐变背景。
- 使用 `.circle` 类来设置圆形的样式,包括宽度、高度、圆角和背景颜色。