Html 带有彩色边框和不透明度的框中的曲线框

我已经研究了几个堆栈溢出问题，虽然有一些问题帮助我设计了我目前所拥有的，但我无法让它看起来和我所追求的完全一样。我正在努力实现这一目标

到目前为止，当观看

除了中间那些白色的角落外，它几乎就在那里。有人能帮我找出我做错了什么吗？我的代码如下

HTML:

---

我正在进一步编辑这个

摆脱

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

.外序
{
边界半径：10px；
边框：1px实心#000；
背景：rgba（102153102.5）；
填充：10px；
}
.内容区
{
填充：10px；
边界半径：10px；
背景：#c7c7c7；
边框：1px实心#000；
}
文本在这里拉拉拉拉
​

我正在进一步编辑此内容

摆脱

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

.外序
{
边界半径：10px；
边框：1px实心#000；
背景：rgba（102153102.5）；
填充：10px；
}
.内容区
{
填充：10px；
边界半径：10px；
背景：#c7c7c7；
边框：1px实心#000；
}
文本在这里拉拉拉拉
​

文本在这里拉拉拉拉
.外序
{
边界半径：10px；
边框：1px实心#000；
背景色：rgba（102153102.5）；
填充：10px；
}
.内容区
{
填充：10px；
边界半径：10px；
边框：1px实心#000；
背景：#c7c7c7；
}

文本在这里拉拉拉拉
.外序
{
边界半径：10px；
边框：1px实心#000；
背景色：rgba（102153102.5）；
填充：10px；
}
.内容区
{
填充：10px；
边界半径：10px；
边框：1px实心#000；
背景：#c7c7c7；
}

你的方法让事情变得更加复杂，然后它需要变得更复杂

---

只需要两个div。就像这样：

你让事情变得更复杂，然后它需要变得更复杂

---

只需要两个div。如下所示：

只需一个元素即可：

HTML:

---

您只需使用一个元素即可完成此操作：

HTML:

---

---

为什么要使用这么多元素而不是一个呢？你的“中间边界”有一个白色背景，因为它的子元素的边界半径。如果需要的话，你可以给它的背景上色，但是@SNAG下面的解决方案非常有效。你实际上也可以删除innerborder。我已经编辑了我的回答为什么使用这么多元素而不是一个？你的“中间边界”有一个白色背景，因为它的子元素的边界半径。如果需要的话，你可以给它的背景上色，但是@SNAG下面的解决方案非常有效。你实际上也可以删除innerborder。我编辑了我的回答你也可以这样做：虽然我的方式不是最好的方式，因为绿色阴影有不透明度，但它下面有一个黑色阴影，所以两者之间必须有一个阴影，这就是背景的颜色。是的，这正是我使用伪元素的原因：）背景可能是渐变或图像。使用伪元素时是否需要空白

content

属性？@Ana我非常喜欢这种简单性。感谢您的输入，您需要为伪元素显式指定

内容。如果你不需要任何东西，那么你只留下空字符串。你也可以这样做：虽然我的方式不是最好的方式，因为绿色阴影有不透明度，但它下面有一个黑色阴影，所以两者之间必须有一个阴影，这就是背景的颜色。是的，这正是我使用伪元素的原因：）背景可能是渐变或图像。使用伪元素时是否需要空白
content
属性？@Ana我非常喜欢这种简单性。感谢您的输入，您需要为伪元素显式指定
内容。如果您不需要在其中包含任何内容，那么只留下空字符串。感谢您的输入。非常感谢您的投入。非常感谢
    <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>​

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

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

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