渐变圆角边框和显示：阻止

Question

编辑：如果我从父级删除z-index，看起来片段工作正常，但是在我的论坛上肯定没有这样做。看看：http://pjonline.tk/index.php?act=idx

所以，我有一些复杂的设置。基本上，我正在建立一个论坛，对吧？每个论坛都有描述。由于有些人继续使用多行，我将其设置为display：block所以包装没有问题。

现在，我想要一种奇特的外观。具体来说，这个：     

除了，呃，你知道。做得恰到好处。我的第一次尝试是使用border-radius百分比，但它是squished in too much。所以我决定在它周围创建一个div，它有正常的边框，并且两个边框都有一个透明度渐变，所以它看起来像上面的显示一样无缝。

我在谷歌周围徘徊了一段时间，最终发现使用:: after获得渐变圆形边框的想法。不幸的是，由于display：block，:: after的背景出现在实际背景之上。 ::之前也没有帮助。

所以，嗯，有点坚持做什么^^;我真的很喜欢我设置的边框，但没有任何效果，而你当然就是无法设置左上角/右下角的颜色＆gt;＆gt;

我有办法做到这一点吗？

当前代码：

body { /* only here to set font size/family */
  font-size: 11px;
  font-family: arial;
}

#wrapper { /* a container these are held in with a specific z-index */
  position:relative;
  z-index:7;
}

.forum-desc {
  background: #EFEFEF;
  border: 1px solid transparent;
  display: block;
  border-radius: 387px 115px 387px 115px / 36px 22px 36px 22px;
  margin-left: 40px;
  width: 335px;
  height: 24px;
  padding: 5px;
  font-style: italic;
  text-align: justify;
  -moz-text-align-last: enter;
  text-align-last: center;
  background-clip: padding-box;
  position: relative;
  z-index: 2;
}

.forum-desc::after {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  background: linear-gradient(red, blue);
  content: '';
  border-radius: 387px 115px 387px 115px / 36px 22px 36px 22px;
  z-index: -2;
}

<div id="wrapper">
    <span class="forum-desc">Various information pertaining to rules and the proper way to act on the forum and game.</span>
</div>

Answer 1

你去我的朋友......

CSS： -

body { /*only here to set font size/family */
  font-size: 11px;
  font-family: arial;
}

.forum-desc {
  background: #EFEFEF;
  border: 1px solid transparent;
  display: block;
  border-radius: 387px 0px 387px 0px / 36px 22px 36px 22px;
  margin-left: 40px;
  width: 335px;
  height: 24px;
  padding: 5px;
  font-style: italic;
  text-align: justify;
  -moz-text-align-last: enter;
  text-align-last: center;
  background-clip: padding-box;
  position: relative;
}

.forum-desc::before {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  background: linear-gradient(red, blue);
  content: '';
  border-radius: 387px 0px 387px 0px / 36px 22px 36px 22px;
  z-index: -2;
}

输出： -

Answer 2

...显然是我的.row4 background-color阻止了所有人正确分层...奇怪，但通过分配.row4 {{1}来解决问题}}， 我猜。我做的一切都正确，只是有相互冲突的代码x：