html - 色の境界線と不透明度のあるボックス内の湾曲したボックス

Question

私はいくつかのスタック オーバーフローの質問を見てきました。私はこれを達成しようとしています。

これまでのところ、これは私の結果です。

中央の白い角を除いて、ほとんどそこにあるようです。誰かが私が間違っていることを解決するのを手伝ってくれますか? 私のコードは次のとおりです。

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/