时间戳

首页 > 解决方案 > CSS：Safari 上的堆叠顺序问题

css - CSS：Safari 上的堆叠顺序问题

问题描述

我正在尝试使用 CSS 创建一个形状，使用之前和之后的伪元素。形状呈现在 Chrome 和 Firefox 中，但在 Safari 中，:before 内容最终堆叠在 :after 内容之上，我不知道为什么。看起来它与我的 :before 元素中的转换有关，但我不确定我到底做错了什么，以及为什么它只在 Safari 中有所不同，我不知道如何修复它。

这是我在 Chrome/Firefox 上得到的 ，这也是我在 Safari 上得到的

.outer {
  position: absolute;
  top: 50px;
  left: 100px;
  transform: rotate(27deg);
}

.shape {
  position: absolute;
	height: 100px;
	width: 100px;
	background-color: blue;
	border-radius: 50%;
}
.shape:before {
  content: '';
  position: absolute;
  left: 36px;
  top: 26px;
  width: 200px;
  height: 48px;
  background-color: inherit;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  transform: perspective(200px) rotateY(70deg);
}
.shape:after {
  content: '';
  position: absolute;
  top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(blue 17%, transparent 19%),
    radial-gradient(red 26%, transparent 28%),
    radial-gradient(blue 40%, transparent 42%),
    red;
}
<div class="outer">
  <div class="shape"></div>
</div>

标签： csssafariz-index

解决方案

不确定到底是什么问题（我无法测试），但您可以调整:before形状以考虑径向渐变，以创建透明部分并避免重叠，即使元素位于顶部。

这是一个示例，我明确地:before在顶部制作了它并且它有效。我还稍微减少了代码。

.shape {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 100px;
  transform: rotate(27deg);
}

.shape:before {
  content: '';
  position: absolute;
  left: 36px;
  top: 26px;
  width: 200px;
  height: 48px;
  background: radial-gradient(25px 23px at left,transparent 98%, blue 100%);
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  transform: perspective(200px) rotateY(70deg);
  z-index:1;
}

.shape:after {
  content: '';
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 50%;
  border:4px solid blue;
  background: 
   radial-gradient(blue 17%, transparent 19%), 
   radial-gradient(red  26%, transparent 28%), 
   radial-gradient(blue 40%, transparent 42%), 
   red;
}
<div class="shape"></div>

推荐阅读