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

一些修改可以让你得到你想要的。

Answer 2

已经给出了答案，主要是关于渐变，因为问题提到了它们。

它们可以用作多个背景，大小可以 sprayed all around a box ，甚至 be animated 。

如果您使用background-image和box-shadow:inset x x x，则影子可以覆盖background-image。

---

单个div的

DEMO ，使用：

• 多个渐变，
• 影子（已回答）
• 或渐变和嵌入阴影的混合