两个圆形 一个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>
相关推荐
浩男孩1 分钟前
🍀实际开发中没想到 computed 在表单中还能这么使用🚀🚀
前端·vue.js
月下点灯4 分钟前
uniapp仿抖音评论区popup对话框实现(多端兼容)
前端·javascript·vue.js
江城开朗的豌豆14 分钟前
React的渲染时机:聊透虚拟DOM的更新机制
前端·javascript·react.js
anyup20 分钟前
🔥🔥 uView Pro:Vue3+TS重构的uni-app开源组件库,文档免费无广告!
前端·vue.js·uni-app
CodeSheep30 分钟前
我天,Java 已沦为老四。。
前端·后端·程序员
前端小巷子1 小时前
Vue 逻辑抽离全景解析
前端·vue.js·面试
excel1 小时前
前端事件机制入门到精通:事件流、冒泡捕获与事件委托全解析
前端
Moment1 小时前
Next.js 15.5 带来 Turbopack Beta、Node 中间件稳定与 TypeScript 强化 🚀🚀🚀
前端·javascript·react.js
yzzzzzzzzzzzzzzzzz2 小时前
初识javascript
前端·javascript
excel3 小时前
硬核 DOM2/DOM3 全解析:从命名空间到 Range,前端工程师必须掌握的底层知识
前端