Question

我看了几个Stack Overflow问题，虽然有些人帮助我制作了迄今为止我所拥有的东西，但我不能让它看起来像我所追求的那样。我正在努力实现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

只需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/

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

4 个答案: