jquery - div 边框的条纹背景

Question

我有一个代码，它为 div 元素的边框设置了纯色。 我的问题是，是否可以给这个边框一个条纹效果？

示例:

<style type="text/css">
    #panel {
        padding: 50px text-align: center;
        background-color: #e5eecc;
        border: solid 10px #c3c3c3;
    }
</style>

<div id="panel">Hello world!</div>

此处的边框背景为纯灰色，即#e5eecc。取而代之的是我想要条纹(斑马纹)。 最好使用 jquery。

Answer 1

使用边框图片:

http://css-tricks.com/understanding-border-image/

像这样:

border-image:url(images/stripe.png) 15 20 30 30 repeat;
border-width: 15px 20px 30px 30px;

然后 generate a stripe image重复的模式。

注意 - 版本低于 11 的 IE 不支持此功能。(取决于您是否关心)

另一种方法是将条纹背景放在包裹您的 div 的某些元素上，为该元素提供填充，然后为您的 div 提供背景颜色，比如#FFF。产生相同的效果。