css - 使用 CSS 内联顶部边框？

Question

我想做一个这样的按钮:

 -----
|+++++|
|TEXTT|
|     |
 -----

如何获得 ++++ 边框？我当前的代码:

.toolbar-top a.button, .toolbar-bottom a.button {
  display: inline-block;
  margin: 7px;
  padding: 0px 9px;
  height: 28px;
  line-height: 28px;

  /* LINE 8 */border: solid 1px #525356;
  -webkit-border-radius: 5px;

  color: #FFFFFF;
  background: -webkit-gradient(linear, left top, left bottom, from(#BFC3CA), to(#848D9B));
  text-decoration: none;
  font-weight: bold;
  text-shadow: #72777D 0px -1px 0px;
}

我想在第 8 行的边框下方添加一个像素的边框。

谁能帮帮我？

---

兼容Webkit(iPad)就好了。
更改 HTML 是不行的(这就是我使用 CSS 的原因)。
使用图像也不是一种选择；D

Answer 1

您可以尝试添加一个不带模糊和 1px 顶部偏移的内嵌框阴影，例如:

-webkit-box-shadow: inset 0 1px 0 #ddd;