Question

你如何围绕一个有边框的div？

this is what I am trying to accomplish 并完成了图像。

我有侧面（或顶部和底部），我不能用灰色 - 银色边框包围div。

[JsFiddle代码：

 <div class="panel-body">
      <ul>
    <li>Locomotives</li>
    <li>Radios</li>
    <li>Televisions</li>
    <li>Computers</li>
    <li>Monitors</li>
    <li>Satellites</li>
    <li>Spaceships</li>
    <li>Submarines</li>
    <li>Scuba Divers</li>
    </ul>
     </div>

]的jsfiddle 2

Answer 1

改为使用box-shadow：

http://jsfiddle.net/3knyndxz/1/

.panel-body {
    float: left;
    padding: 30px;
    background: #fff;
    border-radius: 10px;
    box-shadow: inset 0 0 20px #ccc;
}

Answer 2

这可以通过多层阴影来完成，如果你需要构建某种金属质感，这很棘手。

.container {
  border: 1px solid #999;
  height: 200px;
  width: 90%;
  display: flex;
  justify-content: center;
  padding: 20px;
}

.children {
  width: 30%;
  border: 1px solid #555;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.metalone {
  box-shadow: inset 0px -2px 0px 0px rgba(255, 255, 255, 0.62), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.62), inset 0px 0px 1px 1px rgba(56, 8, 8, 0.91), inset 0px 0px 0px 2px rgba(192, 121, 121, 0.8), inset 0px 0px 0px 3px rgba(152, 47, 47, 0.85), inset 0px 0px 0px 4px rgba(152, 47, 47, 0.85), inset 0px 0px 1px 5px rgba(56, 8, 8, 0.945);
}

.metaltwo {
  box-shadow: inset 0px 3px 0px 0px rgba(29, 29, 29, 0.62), inset 0px 0px 1px 2px rgba(46, 46, 46, 0.91), inset 0px 0px 0px 3px rgba(255, 255, 255, 0.8), inset 0px 0px 0px 4px rgba(112, 112, 112, 0.85), inset 0px 0px 0px 5px rgba(219, 219, 219, 0.85), inset 0px 0px 1px 6px rgb(250, 250, 250);
  background: black;
  color: white;
}

<div class="container">
  <div class="metalone children">Metal Texture one</div>
  <div class="metaltwo children">Metal Texture two</div>
</div>

箱阴影。

用渐变边框包围div

2 个答案: