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

Question

我的目标是在纯 css 中获得带有边框的效果。我想问你是否可以(或者我必须使用图像)？我是否必须使用这种跨度属性或轮廓或其他东西？也许您知道我可以找到如何做的教程吗？

Answer 1

另一种不使用边框但纯 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