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。产生同样的效果。

Answer 2

dashed可以实现条纹效果：

border: dashed 10px #c3c3c3;

或使用jQuery：

$("#panel").css("border","dashed 10px #c3c3c3")

请注意，如果您希望c3c3c3完全像斑马一样，则可以将black更改为{{1}}。

DEMO

div的边框条纹背景

2 个答案: