仅在一个边框上绘制轮廓答案

【问题标题】：outline on only one border仅在一个边框上绘制轮廓
【发布时间】：2012-09-22 05:18:08
【问题描述】：

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

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

【问题讨论】：

您的链接已失效。您可以使用图片工具将图像直接粘贴到问题中。

标签： html css

【解决方案1】：

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

如果我得到正确的评论

【讨论】：

如何使边框左/右/等插入？例如，距离块边界 3 个像素但在内部？
@CorinneStoppelli 你能解释一下吗？
@Database_Query，我认为您错过了使用大纲属性（或类似属性）的部分，这意味着他不想为 div 添加更多的重量/高度。 border 属性实际上确实添加了，但 outline 没有。 box-shadow 替代方案似乎是一个更好的选择，即使您需要稍微使用它的选项。

【解决方案2】：

Outline 确实是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.）

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

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

【讨论】：

你好 Giona，我刚刚在我的问题中添加了一张图片以使其更清楚：我需要在我的块的限制和我的边界之间留出空间。
感谢@GionaF，但似乎边界仍然在块的“上方”而不是“内部”。（什么是 \a0 ？只是创建块的随机内容？）exiledesigns.com/stack2.jpg（我尝试了 5px 的填充但没有任何改变）
@DominicTobias 我真的不记得了 ;-)
作为参考，\a0 是一个不间断的空格。
对于我的用例，采用这个并稍作修改。需要使用 :before 伪类在元素上添加绝对位置和 100% 的宽度，以及元素的相对位置，以防其他人有同样的问题。

【解决方案3】：

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

这会在顶部放置一行：

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

我创建了一个jsFiddle，您可以在其中查看它的实际情况。

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

插图

对于 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。

【讨论】：

我喜欢这种创意方式，谢谢分享！
您没有创建嵌入边框，也没有解释 box-shadow 的语法。谢谢。
这个有限制，如果需要自定义样式边框！

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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/

【讨论】：

【解决方案6】：

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

[contenteditable] {
    border-bottom: 1px solid transparent;
    &:focus {outline: none; border-bottom: 1px dashed #000;}
}

【讨论】：

【解决方案7】：

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

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

【讨论】：