css - css3不寻常设计中的边框样式

Question

我的目标是在纯 css 中获得这种带有边框的效果。我想问你有没有可能（或者我必须使用图像）？我是否必须使用这种跨度属性或大纲或其他东西？也许你知道我可以找到教程怎么做？

Answer 1

这将是棘手的。

使用边框我可以为您提供的最好的方法是 CSS border-image，它确实可以让您设计几乎任意的边框设计。您可以在 MDN 上阅读有关它的更多信息。

它的优点是它旨在处理跨边界长度的拉伸图像，并根据需要为每个边和角等提供单独的图像，因此非常灵活。

除了上面链接的 MDN 页面之外，我不会给出示例，因为 CSS 代码本身比较简单；你需要让它工作的主要是实际的图像，这是你需要自己提供的东西。

但是，您遇到的主要问题border-image是浏览器支持。这是对 CSS 的一个相对较新的补充，一些相当现代的浏览器不支持它。这包括 IE10。根据您的需要，这可能会成为解决方案。

因此，可以更好地跨浏览器工作的替代解决方案是将边框定义为背景图像。这是相当明显的，实际上效果很好。如果盒子的高度变化很大，那么您可能会遇到缩放问题，但这可以通过使用多个背景图像来避免。

希望有帮助。

Answer 2

另一种不使用边框但纯 CSS 的可能性是使用伪元素进行一些古怪的工作。

例如：

p:after {
  content: '';
  background-color: red;
  position: absolute;
  width: 20px;
  left: 0;
  top: -2px;
  bottom: -2px;
  z-index: -1;
}

你可以在这里看到演示：http: //jsbin.com/iduvoj/1/edit

这是您最后一个示例的另一个演示：http: //jsbin.com/igotul/1/edit

现在这取决于一些事情，例如您将堆叠多少元素，您的段落是否可以具有纯色背景等。但它有可能会起作用。

它也只取决于:before并且:after得到很好的支持：http ://caniuse.com/#search=before