CSS - 使用类的渐变"边框"

Question

我正在做一个项目,我希望设计"顺畅".为此,我使用CSS渐变.但是,我不确切知道如何实现我想要的.我的CSS代码如下:

#wrapper .midcontainer
{
 width: 1000px;
 margin: 20px auto;
}

#wrapper .midcontainer .mid
{
 width: 980px;
 background: #2d2929;
 position: relative;
}

#wrapper .midcontainer .mid .left
{
 background: #2d2929;
 background: -webkit-linear-gradient(right, #2d2929, #e0e0e0);
 background: -o-linear-gradient(right, #2d2929, #e0e0e0);
 background: -moz-linear-gradient(right, #2d2929, #e0e0e0);
 background: linear-gradient(right, #2d2929, #e0e0e0);
 width: 10px;
 height: 100%;
 position: absolute;
 left: -10px;
}

#wrapper .midcontainer .mid .right
{
 background: #2d2929;
 background: -webkit-linear-gradient(left, #2d2929, #e0e0e0);
 background: -o-linear-gradient(left, #2d2929, #e0e0e0);
 background: -moz-linear-gradient(left, #2d2929, #e0e0e0);
 background: linear-gradient(left, #2d2929, #e0e0e0);
 width: 10px;
 height: 100%;
 position: absolute;
 right: -10px;
}

#wrapper .midcontainer .mid .top
{
 background: #2d2929;
 background: -webkit-linear-gradient(bottom, #2d2929, #e0e0e0);
 background: -o-linear-gradient(bottom, #2d2929, #e0e0e0);
 background: -moz-linear-gradient(bottom, #2d2929, #e0e0e0);
 background: linear-gradient(bottom, #2d2929, #e0e0e0);
 width: 1000px;
 height: 10px;
 position: absolute;
 top: -10px;
 left: -10px;
 border-top-radius: 5px;
}

#wrapper .midcontainer .mid .bot
{
 background: #2d2929;
 background: -webkit-linear-gradient(top, #2d2929, #e0e0e0);
 background: -o-linear-gradient(top, #2d2929, #e0e0e0);
 background: -moz-linear-gradient(top, #2d2929, #e0e0e0);
 background: linear-gradient(top, #2d2929, #e0e0e0);
 width: 1000px;
 height: 10px;
 position: absolute;
 bottom: -10px;
 left: -10px;
 border-bottom-radius: 5px;
}

我的HTML代码是:

  <div class="midcontainer">
   <div class="mid">   
    <div class="top"></div>
    <div class="bot"></div>
    <div class="left"></div>
    <div class="right"></div>
    test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
    </div>
  </div>

我的结果看起来像这样:

我希望边缘具有半径和截距.我对以不同方式开发此代码的建议持开放态度.然而,它看起来并不是很好.你有什么建议吗？

Answer 1

您可以使用box-shadow创建类似的效果

<div class="shadow"> test </div>

div .shadow{
box-shadow: 0px 0px 10px 5px rgb(85, 85, 85);
}

一些修改应该可以让你得到你想要的.