盒子內的彩色邊框和不透明度的曲線盒子

Question

我已經看過幾個堆棧溢出問題，雖然有些人幫助我製作了迄今爲止我所擁有的東西，但是我仍然無法讓它看起來完全像我之後的樣子。我正在努力實現this。

到目前爲止this is my result查看時。

似乎它幾乎在那裏，除了中間區域的那些白色的角落。任何人都可以幫我弄清楚我做錯了什麼？我的代碼如下。

HTML：

<div class="outerborder"> 
     <div class="middleborder"> 
      <div class="innerborder"> 
       <div class="contentarea"> 

        Text here lalalalala 

       </div> 
      </div> 
     </div> 
    </div> 

CSS：

.outerborder 
{ 
border-radius:10px; 
border: 1px solid #000; 
} 

.middleborder 
{ 
border-radius:10px; 
border: 10px solid rgba(102,153,102, .5); 
} 

.innerborder 
{  
border-radius:10px; 
border: 1px solid #000; 
} 

.contentarea 
{ 
padding: 10px; 
border-radius:10px; 
background: #c7c7c7; 
} 

Answer 1

我進一步修改此。

擺脫middleborder並使用它。

<style> 
     .outerborder 
     { 
     border-radius:10px; 
     border: 1px solid #000; 
     background:rgba(102,153,102, .5); 
     padding:10px; 
     } 

     .contentarea 
     { 
     padding: 10px; 
     border-radius:10px; 
     background: #c7c7c7; 
     border: 1px solid #000; 
     } 
     </style> 
     <div class="outerborder"> 
     <div class="contentarea"> 
      Text here lalalalala 
     </div> 
     </div>​ 

Answer 2

<div class="outerborder"> 
     <div class="contentarea"> 
      Text here lalalalala 
     </div> 
</div> 

.outerborder 
{ 
    border-radius:10px; 
    border: 1px solid #000; 
    background-color:rgba(102,153,102, .5); 
    padding:10px; 
} 
.contentarea 
{ 
    padding: 10px; 
    border-radius:10px; 
    border:1px solid #000; 
    background: #c7c7c7; 
} 

Answer 3

您使它的方式更加複雜，然後它需要。

只需要2個div。像這樣：http://jsfiddle.net/fnycs/

Answer 4

你可以只用1元做到這一點：http://dabblet.com/gist/3559637

HTML：

<div class='b'>Text-here lalala</div> 

CSS：

.b { 
    position: relative; 
    padding: 10px; 
    border: solid 1px #000; 
    border-radius: 10px; 
    box-shadow: 0 0 0 10px rgba(102, 153, 102, .5); 
    margin: 125px 15px 0; 
} 
.b:before { 
    position: absolute; 
    top: -11px; right: -11px; bottom: -11px; left: -11px; 
    border: solid 1px #000; 
    border-radius: 21px; 
    content: ''; 
}