🪴 Edwin Aze's Blog

最近文章

  • 洛师薅羊毛教程

    2025年4月29日

  • 挖土机编程 CSP-J 2022 模拟赛 Round 2

    2025年4月29日

  • 我是学生 如何白嫖GPT4

    2025年4月29日

最近笔记

  • Hi~

    2025年4月29日

  • 202503051617 latex documentclass options

    2025年4月29日

创建基于父元素一半大小的圆形

2025年4月29日1分钟阅读

.step-img-box::after {
	content: "";
	display: block;
	width: 60%;
	/* height:60%; */
	padding-bottom: 60%;
 
	background-color: #fdf2e9;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	  border-radius: 50%;
	z-index: -1;
}

重点在于 width 和 padding-bottom,前者规定宽度,后者设置一部分内容以便占据对应的高度。

相关链接:

  • translate 实现绝对定位时的居中位置
  • z-index 更改图像显示层级
  • 末尾伪元素 after

反向链接

  • translate 实现绝对定位时的居中位置

Created with Quartz v4.4.0 © 2025

  • GitHub
  • Discord Community