仅限一个边界的轮廓

Question

如何将嵌入边框应用于HTML元素，但仅限于其中的一侧。 到目前为止，我一直在使用图像来做那个（GIF / PNG），然后我将其用作背景并拉伸它（repeat-x）并从我的块的顶部稍微偏离。 最近，我发现了大纲 CSS属性，这很棒！但似乎围绕整个街区...... 是否可以使用此大纲属性仅在一个边框上执行此操作？ 此外，如果没有，你有任何可以取代背景图像的CSS技巧吗？ （这样我以后可以使用CSS等个性化轮廓的颜色）。 提前谢谢！

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

Answer 1

您可以使用box-shadow在一侧创建轮廓。与outline一样，box-shadow不会更改框模型的大小。

这会在最上面加上一行：

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

我制作了一个jsFiddle，您可以在其中查看它。

---

<强> INSET

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

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

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

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

有关box-shadow工作原理的详细信息，请查看MDN page。

Answer 2

大纲确实apply to the whole element。

现在我看到了你的形象，这是如何实现它的。

.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>

（或参见external demo.）

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

重要说明：。元素必须具有display:block;（div的默认值）才能生效。如果不是这样，请提供您的完整代码，以便我可以详细说明具体答案。

Answer 3

尝试使用阴影（如边框）​​+边框

border-bottom: 5px solid #fff;
box-shadow: 0 5px 0 #ffbf0e;

Answer 4

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/

Answer 5

我知道这很老了。但是，是的。我喜欢比Giona回答短得多的解决方案

in_list = [[1,2,3], [4,5,6], [3,4], [7,8], [8,9], [6,12,13]] * 300
%timeit consolidate_orig(in_list)
# 1.04 s ± 14.9 ms per loop (mean ± std. dev. of 7 runs, 1 loop each)
%timeit consolidate(in_list)
# 724 ms ± 7.51 ms per loop (mean ± std. dev. of 7 runs, 1 loop each)
%timeit merge(in_list)
# 1.04 s ± 7.94 ms per loop (mean ± std. dev. of 7 runs, 1 loop each)

in_list = [[1, 3], [5, 6], [3, 4], [7, 8], [8, 9], [12, 13]] * 300
%timeit consolidate_orig(in_list)
# 1.03 s ± 18 ms per loop (mean ± std. dev. of 7 runs, 1 loop each)
%timeit consolidate(in_list)
# 354 ms ± 3.43 ms per loop (mean ± std. dev. of 7 runs, 1 loop each)
%timeit merge(in_list)
# 967 ms ± 16.6 ms per loop (mean ± std. dev. of 7 runs, 1 loop each)

Answer 6

我想为输入字段添加边框，移除焦点上的轮廓，然后“概述”边框：

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

Answer 7

只有一方outline无效，您可以使用border-left/right/top/bottom

如果我正确评论你的评论