两个圆形一个z里面一个z外面，z里面的大，颜色不同 html

Jonathan Star

于 2024-09-27 23:15:00 发布

阅读量38

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/jonathan_joestar/article/details/142598019

版权

两个圆形一个z里面一个z外面，z里面的大，颜色不同 html

<!DOCTYPE html>
<html>
<head>
<style>
.outer-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #ff9999; /* 外圆的颜色 */
  position: relative;
}

.inner-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #99ff99; /* 内圆的颜色 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 两个圆形 一个z里面一个z外面，z里面的大，颜色不同 html */
</style>
</head>
<body>

<div class="outer-circle">
  <div class="inner-circle"></div>
</div>

</body>
</html>