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

Answer 2

这将是棘手的。

我可以给你提供的最好的边框是CSS border-image，它确实可以让你设计几乎任意的边框设计。你可以阅读更多关于它on MDN。

它的优点是它的设计能够处理跨越边界长度的图像，并根据需要为每个边和角落分开图像等，因此非常灵活。

我不会在上面链接的MDN页面上给出一个例子，因为CSS代码本身相对简单;你需要让它工作的主要事情将是实际的图像，这是你需要提供自己的东西。

但是，您将遇到的主要问题是border-image是浏览器支持。这是一个相对较新的CSS，一些相当现代的浏览器不支持它。这包括IE10。取决于你需要什么，这可能会缩小这个解决方案。

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

希望有所帮助。