盒子内的彩色边框和不透明度的曲线盒子

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