仅限一个边界的轮廓

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

Answer 2

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

现在,我看到你的形象,这是如何实现它.

.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)才能使其正常工作.如果不是这样,请提供您的完整代码,以便我能够详细说明具体答案.

Answer 3

尝试使用阴影(如边框)​​+边框

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