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

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

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>
相关推荐
海云前端12 分钟前
前端写简历有个很大的误区,就是夸张自己做过的东西。
前端
葡萄糖o_o22 分钟前
ResizeObserver的错误
前端·javascript·html
AntBlack23 分钟前
Python : AI 太牛了 ,撸了两个 Markdown 阅读器 ,谈谈使用感受
前端·人工智能·后端
MK-mm41 分钟前
CSS盒子 flex弹性布局
前端·css·html
小小小小宇1 小时前
CSP的使用
前端
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | AnimatedNavigation(动态导航)
前端·javascript·vue.js·tailwindcss
ifanatic1 小时前
[每周一更]-(第147期):使用 Go 语言实现 JSON Web Token (JWT)
前端·golang·json
烛阴1 小时前
深入浅出地理解Python元类【从入门到精通】
前端·python
米粒宝的爸爸1 小时前
uniapp中vue3 ,uview-plus使用!
前端·vue.js·uni-app
JustHappy2 小时前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(下)
前端·javascript·react.js