html - 按下边框 CSS

Question

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

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

我尝试了很多不同的东西，甚至花了太长时间，使用 webkit-border-image，尝试通过我在 photoshop 中创建的外部 jpg 文件实现效果，大声笑。

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

更烦人的是，我会恳请边框为以下基色:#4b5ed6。

如果您不明白我要查找的内容，请查找:http://www.bet365.dk/ 我想创建与它们在 wrapper 上相同的边框效果，背景颜色为 #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