html - 按下边框 CSS

Question

老实说，有一个非常简单且有点尴尬的问题。我似乎无法弄清楚如何在下图中实现边框效果：

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

我尝试了很多不同的东西，甚至花了太长时间，使用 webkit-border-image 来尝试通过我在 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