html - 带有颜色边框和不透明度的框内的弯曲框

Question

我已经查看了几个 Stack Overflow 问题，虽然有些问题帮助我制作了迄今为止我所拥有的东西，但我仍然无法让它看起来与我所追求的完全一样。我正在努力实现这一目标。

到目前为止，这是我查看时的结果。

除了中间区域的那些白色角落之外，它似乎几乎就在那里。谁能帮我弄清楚我做错了什么？我的代码如下。

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

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

Answer 3

<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 4

你让它变得比它需要的更复杂。

只需要2个div。像这样：http: //jsfiddle.net/fnycs/