Question

我想在我的网站边缘添加边框，例如this :(我指的是网站左右边缘的灰色边框）

enter image description here

我很难用CSS完成这个。我不明白的一件事是如何在白色和灰色之间创建阴影。有人可以帮忙吗？

Answer 1

在容器元素上尝试box-shadow：

.container {
    box-shadow: 0 0 10px 10px #666;
}

根据需要调整大小（10px），模糊（10px）和颜色（＃666）。

Answer 2

这是通过简单的box-shadow完成的。演示：http://jsbin.com/ivugeh/1/edit

<body>

  <div class="page">

  </div>

</body>

body { 
  background: url('http://dovetail-demo.squarespace.com/assets/concrete-texture.png'); 
  padding: 0; 
  margin: 0;
}
.page {
  box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
  background: #fff;
  width: 400px;
  margin: 0 auto;
  height: 100%;
}

使用CSS在我的网站边缘添加灰色边框

2 个答案: