полосатый фон для границы div

Question

полосатый фон для границы div

0

У меня есть код со мной, который имеет сплошной цвет для границы элемента 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.

user3442248 20 март 2014, в 15:27

Источник

0

border-style может делать пунктирные или пунктирные границы. Если вы хотите установить с помощью jQuery используйте .css()
Crayon Violent 20 март 2014, в 13:38

Теги:

jquery

html

css

2 ответа

Ещё вопросы

border-style может делать пунктирные или пунктирные границы. Если вы хотите установить с помощью jQuery используйте .css()

vsync · Answer 1 · 2014-03-20T10-47-00.000Z

Использовать изображения границ:

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

вот так:

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

Затем создайте шаблон изображения полос, который повторяется.

note - IE версии менее 11 не поддерживает это. (зависит, заботитесь или нет)

Другой способ - поместить полосатый backgroud какой-либо элемент, который обертывает ваш div, отдает этот элемент, а затем дает вам div цвет фона, например #FFF. создает тот же эффект.

Gaurang Tandon · Answer 2 · 2014-03-20T11-22-00.000Z

Полосатый эффект возможен с dashed:

border: dashed 10px #c3c3c3;

или с помощью jQuery:

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

Обратите внимание, что вы можете изменить c3c3c3 на black если хотите, чтобы он был точно похожим на зебра.

DEMO