100

如何将插入边框应用到 HTML 元素中，但仅限于它的一侧。到目前为止，我一直在使用图像（GIF/PNG）来做这件事，然后我会将其用作背景并拉伸它（repeat-x）并定位在离我的块顶部稍远的位置。最近发现了outline CSS 属性，太棒了！但似乎圈出了整个街区......是否有可能只在一个边框上使用这个轮廓属性？另外，如果没有，您是否有任何可以替换背景图像的 CSS 技巧？（这样我以后可以使用 CSS 等个性化轮廓的颜色）。提前致谢！

这是我想要实现的图像： http: //exiledesigns.com/stack.jpg

4

7 回答 7

149

您可以使用box-shadow在一侧创建轮廓。像outline，box-shadow不改变盒子模型的大小。

这在顶部放置了一行：

box-shadow: 0 -1px 0 #000;

我制作了一个jsFiddle，您可以在其中查看它的实际效果。

语法是box-shadow: offset-x | offset-y | blur-radius | color

插图

对于插入边框，使用inset关键字。这会在顶部放置一条插入线：

box-shadow: 0 1px 0 #000 inset;

可以使用逗号分隔的语句添加多行。这会在顶部和左侧放置一条插入线：

box-shadow: 0 1px 0 #000 inset,
            1px 0 0 #000 inset;

有关如何box-shadow工作的更多详细信息，请查看MDN 页面。

于 2013-09-17T04:34:58.483 回答
50

大纲确实适用于整个元素。

现在我看到了您的图像，这是实现它的方法。

.element {
  padding: 5px 0;
  background: #CCC;
}
.element:before {
  content: "\a0";
  display: block;
  padding: 2px 0;
  line-height: 1px;
  border-top: 1px dashed #000; 
}
.element p {
  padding: 0 10px;
}
<div class="element">
  <p>Some content comes here...</p>
</div>

（或查看外部演示。）

所有尺寸和颜色都只是占位符，您可以更改它以匹配所需的确切结果。

重要说明：.element 必须具有display:block;（默认为 div）才能正常工作。如果不是这种情况，请提供您的完整代码，以便我详细说明具体答案。

于 2012-10-01T10:56:29.950 回答
10

试试阴影（像边框）+边框 

border-bottom: 5px solid #fff;
box-shadow: 0 5px 0 #ffbf0e;
于 2013-11-07T05:29:54.363 回答
1

我知道这是旧的。但是，是的。我更喜欢更短的解决方案，而不是 Giona 答案

[contenteditable] {
    border-bottom: 1px solid transparent;
    &:focus {outline: none; border-bottom: 1px dashed #000;}
}
于 2018-09-28T11:38:41.360 回答
0

我喜欢给我的输入字段一个边框，删除焦点的轮廓，然后“勾勒”边框：

input {
  border: 1px solid grey;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }

您也可以使用透明边框来做到这一点：

input {
  border: 1px solid transparent;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }
于 2018-12-24T05:42:39.557 回答
-1

HTML/CSS 的伟大之处在于通常有不止一种方法可以实现相同的效果。这是另一种解决方案，可以满足您的需求：

<nav id="menu1">
    <ul>
        <li><a href="#">Menu Link 1</a></li>
        <li><a href="#">Menu Link 2</a></li>
    </ul>
</nav>

nav {
    background:#666;
    margin:1em;
    padding:.5em 0;
}
nav ul {
    border-top:1px dashed #fff;
    list-style:none;
    padding:.5em;
}
nav ul li {
    display:inline-block;
}
nav ul li a {
    color:#fff;
}

http://jsfiddle.net/10basetom/uCX3G/1/

于 2013-11-16T07:42:53.167 回答
-2

只有一侧outline不起作用，您可以使用border-left/right/top/bottom

如果我能正确理解你的评论

在此处输入图像描述

于 2012-10-01T10:55:43.477 回答