如何隐藏边框特定部分？CSS实现土星环布局的问题求助

直接通过调整元素层级和重新设计环形样式就能解决，核心思路是让土星覆盖住环的后半部分，同时用扁椭圆边框制作符合形态的土星环。

修改后的代码： #

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0; /* 移除默认边距，避免布局偏移 */
}

.big {
  width: 170px;
  height: 170px;
  background-color: #fad5a5; /* 替换为更接近土星的颜色 */
  border-radius: 50%;
  position: relative;
  z-index: 1; /* 将土星设为上层，覆盖环的后半部分 */
}

.saturn-ring {
  width: 320px;
  height: 80px;
  border: 4px solid #d4b886; /* 土星环的颜色 */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 让环与土星居中对齐 */
  z-index: 0; /* 环在土星下方 */
}

<div class="big"></div>
<div class="saturn-ring"></div>

原理说明： #

• 层级控制：通过z-index让土星（.big）位于环（.saturn-ring）的上方，自然遮挡住行星后方的环部分，不需要手动隐藏边框。
• 环形制作：用宽高比接近土星环的扁椭圆（width:320px; height:80px）配合border-radius:50%制作环形，替代原来的skew变形，形态更准确。
• 居中对齐：通过position:absolute和transform:translate(-50%, -50%)让环与土星完美居中，避免布局偏移。

内容的提问来源于stack exchange，提问作者Vishal. C