Html CSS-梯度“；“边界”；使用类

我正在做一个项目，我希望设计“流畅”。为了实现这一点，我使用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>

测试
测试
测试
测试
测试
测试
测试
测试
测试
测试

我的结果如下所示：

---

我希望边具有半径和截距。我愿意接受关于以不同方式开发此代码的建议。然而，它的边缘看起来不是很好。您有什么建议吗？

您可以使用长方体阴影创建类似效果

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

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

测试
暗影{
盒影：0px 0px 10px 5px rgb（85,85,85）；
}

---

只需稍作修改就可以得到您想要的效果。

您可以使用方框阴影创建类似效果

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

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

测试
暗影{
盒影：0px 0px 10px 5px rgb（85,85,85）；
}

---

一些修改会让你完全得到你想要的。

答案已经给出，主要是关于问题中提到的梯度

它们可以用作多个背景，大小可以是甚至

如果使用

背景图像

和

框阴影：inset x x

，阴影可以覆盖

背景图像

---

使用一个div，使用：

• 多重梯度
• 影子（如回答）
• 或者渐变和插入阴影的混合

---

答案已经给出，主要是关于问题提到的梯度

它们可以用作多个背景，大小可以是甚至

如果使用

背景图像

和

框阴影：inset x x

，阴影可以覆盖

背景图像

---

使用一个div，使用：

• 多重梯度
• 影子（如回答）
• 或者渐变和插入阴影的混合

---

您是否考虑过使用边框图像？我已经检查过了-但是，我似乎无法让它与相应的边框颜色一起工作（见图）。我希望整个框的边框从#2d2929到#e0。您考虑过使用边框图像吗？我已经检查过了-但是，我似乎无法让它与相应的边框颜色一起工作（见图）。我希望整个盒子的边界从2d2929到E0E0，你比我快！我创建了这个演示：。。。我使用了两层框状阴影，通过布莱克·曼提供的修改，尽可能近距离地再现了他的图像。这不是同一件事，但很相似……）你比我快！我创建了这个演示：。。。我使用了两层框状阴影，通过布莱克·曼提供的修改，尽可能近距离地再现了他的图像。这不是同一件事，但很相似……）