按下边框CSS

Question

老实说，有一个非常简单且有点尴尬的问题。我似乎不知道如何在下面的图片中实现边界效果：

http://cdn.churchm.ag/wp-content/uploads/2011/09/indented.png

我尝试了很多不同的东西，甚至花了太长时间，使用webkit边界图像，试图通过我在photoshop中创建的外部jpg文件来实现效果

无论如何，我在这里寻求指导，我所需要的只是实现图像中的上/下/左/右边界的代码片段。

更详细地说，我希望边界是以下颜色：#4b5ed6。

如果你没有得到我想要的东西，请查找：http://www.bet365.dk/我想创建与包装上相同的边框效果，背景色为#6779e8，边框看起来像在他们的网站上一样被按下。

提前-谢谢！

Answer 1

可以使用<hr>:实现

text
<hr>
text
<hr>
text

或inset边界：

.myBorder{
   border:inset 1px; 
}

text
<div class="myBorder"></div>
text
<div class="myBorder"></div>
text

请注意，如果使用inset边界，您也可以自定义其宽度或颜色：

.myBorder{
   border:inset 2px; 
   border-color:green;
}

text
<div class="myBorder"></div>
text
<div class="myBorder"></div>
text