渐变圆角边框和 display:block

Question

编辑： 如果我从父级删除 z-index，该代码段似乎工作正常，但它肯定不会在我的论坛上这样做。看一看：http://pjonline.tk/index.php?act=idx

那么，我的设置有点复杂。基本上，我在做一个论坛，对吧？每个论坛都有描述。由于有些人继续多行，我将其设置为 display:block 所以换行没有问题。

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

除了，呃，你知道的。制作妥当。我的第一次尝试是使用百分比边界半径，但它是 squished in too much。所以我决定在它周围创建一个 div，它有正常的边框，并且两个边框都有透明度渐变，所以它看起来像上面的显示一样无缝。

我在Google 闲逛了一会儿，最终找到了使用::after 来获得渐变圆角边框的想法。不幸的是，由于 display:block，::after 的背景出现在实际背景之上。 ::before 也没有帮助。

那么，嗯，小小卡住了该怎么做 ^^；我真的很喜欢我设置的边框，但没有任何效果而且你当然只是无法设置 top-left/bottom-right >>[=16 的颜色=]

我有办法做到这一点吗？

当前代码：

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 z-index，我猜。我做的一切都正确，只是有冲突的代码 x:

渐变圆角边框和 display:block

Gradient rounded borders and display:block

css

border

linear-gradients

display