Question

所以我做了一些小贴士：

它们在镀铬上显示得很好，甚至可以在iPad和iPhone上进行狩猎。但是在Mac上的safari上，背景覆盖了文本。

有什么想法吗？

.address_tab {
    position: relative;
    display: inline-block;
    padding: 10px 30px 8px;
    color: #14528b;
    margin-left: 20px;
}

.address_tab::before {
    content: ''; /* To generate the box */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -999;
    background: #d0d0d0;
    background: -webkit-linear-gradient(left, #d0d0d0, #e8e8e8);
    background: -o-linear-gradient(right, #d0d0d0, #e8e8e8);
    background: -moz-linear-gradient(right, #d0d0d0, #e8e8e8);
    background: linear-gradient(to right, #d0d0d0 , #e8e8e8);
    transform: perspective(4px) rotateX(1deg);
    border: 1px #b2b2b2 solid;
}

.address_tab::before {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

<div class="address_tab">
  Delivery Details
</div>

Answer 1

好的，所以我偶然发现了这篇帖子http://katydecorah.com/code/z-index-and-transform/，它似乎有解决你的问题的方法。这是一个很好的阅读方式：）

这里有一个更新的小提琴https://jsfiddle.net/VilleKoo/a8zv69ka/

.address_tab {
   position: relative;
   display: inline-block;
   padding: 10px 30px 8px;
   color: #14528b;
   margin-left: 20px;
   transform-style: preserve-3d;
}

.address_tab::before {
   content: ''; /* To generate the box */
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
   background: #d0d0d0;
   background: -webkit-linear-gradient(left, #d0d0d0, #e8e8e8);
   background: -o-linear-gradient(right, #d0d0d0, #e8e8e8);
   background: -moz-linear-gradient(right, #d0d0d0, #e8e8e8);
   background: linear-gradient(to right, #d0d0d0 , #e8e8e8);
   transform: perspective(4px) rotateX(1deg) translateZ(-1px);
   border: 1px #b2b2b2 solid;
}

.address_tab::before {
   -webkit-border-top-left-radius: 10px;
   -webkit-border-top-right-radius: 10px;
   -moz-border-radius-topleft: 10px;
   -moz-border-radius-topright: 10px;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
 }

<div class="address_tab">
  Delivery Details
</div>

伪背景覆盖文本之前和之后

1 个答案: