漸變圓形邊框和顯示：塊

Question

編輯：看來，片段工作正常，如果我從父母刪除z-index，但它肯定不會在我的論壇上這樣做。看看：http://pjonline.tk/index.php?act=idx

所以，我有一些有點複雜的設置。基本上，我正在創建一個論壇，對吧？並且每個論壇都有一個描述。由於一些線路是多行的，因此我將它設置爲display：block，這樣就不會出現纏繞問題。

現在，我想要一種幻想的外觀。具體來說，這個：

除了，呃，你知道。妥善製作。我的第一次嘗試是用百分比邊界半徑，但它是squished in too much。所以我決定在它周圍創建一個具有正常邊框的div，並且兩個邊框的透明度都會消失，所以它看起來像上面的顯示一樣。

我在谷歌周圍漫步了一段時間，最終發現使用:: after得到漸變圓角邊框的想法。不幸的是，由於display：block，:: after的背景出現在實際背景之上。 ::之前也沒有幫助。

所以，嗯，律位卡在做什麼^ ^;我真的很喜歡我設置的邊框，但沒有什麼工作，你當然當然只是不能設置左上角/右下角的顏色>>

有沒有辦法我可以做到這一點？

當前代碼：

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

......顯然，這是我.row4的background-color這是阻止這一切從分層正常...奇怪的，但通過分配.row4一個z-index解決的問題，我猜。我做的一切正確，只是有衝突的代碼x：

Answer 2

這裏ü去我FRND ...

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; 
} 

輸出： -