代码之家 › 专栏 › 技术社区 › user142019

带CSS的内联边框顶部?

border css

user142019 · 技术社区 · 16 年前

我想做一个这样的按钮:

 -----
|+++++|
|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;
}

我想在第八行的边框下加一个像素的边框。

有人能帮我吗?

如果与Webkit(iPad)兼容就好了。
更改HTML是没有选择的(这就是我使用CSS的原因)。
使用图像也没有选择;D

3 回复 | 直到 16 年前

Yi Jiang G-Man 16 年前

您可以尝试添加不带模糊和1px顶部偏移的插入框阴影,例如:

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

Moin Zaman 16 年前

在你的纽扣里放一个跨距,像这样:

<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>);

user142019user142019 14 年前

对于纯CSS解决方案,可以使用 outline :

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前