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

在你的按钮里放一个跨度：

<a href="/" class="button"><span>text</span></a>

然后设置您的跨度样式以具有边框

a.button span { display:block; border-top:1px solid red }

如果您无法修改HTML但使用javascript，我建议使用jQuery并按照以下方式执行：

$('a.button').wrapInner(<span></span>);

Answer 2

你可以尝试添加一个没有模糊和1px顶部偏移的插入框阴影，如：

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

Answer 3

对于纯CSS解决方案，可以使用outline：

#mydiv {
  outline: solid 1px #525356; /* outline border */
  border-top: solid 1px #fff; /* inner top border */
}

带CSS的内联边框顶部？

3 个答案: