CSS границы изображения границы для элемента div

Question

CSS границы изображения границы для элемента div

0

Почему одно изображение появляется во всех четырех углах? Мне нужно только одно изображение для отображения

У кого-нибудь есть предложения?

<html>
    <style>
        div.one{
            border-style: inset;
            border-width:50px;
            border-image-source:url(border1.png);       
        }
    </style>

    <body>
        <div class="one">
        </div>
    </body>
</html>

user2956454 02 дек. 2013, в 12:57

Источник

0

затем укажите свойства для border-right / left / top / bottom, где бы вы ни хотели увидеть эффект
Vinay Pratap Singh 02 дек. 2013, в 11:13
0

как это сделать?
user2956454 02 дек. 2013, в 11:15
0

CSS border-image Свойство, если вы хотите одну боковую границу, вы можете попробовать, например, border-left-image-source: url(border1.png);
mdesdev 02 дек. 2013, в 11:19
0

это тоже не работает ... Я хочу, чтобы мое изображение border.png ... отображалось как одно изображение ..... но код, который я пробовал, заставляет его появляться во всех 4 углах ....
user2956454 02 дек. 2013, в 11:25

Показать ещё 2 комментария

Теги:

html

css

3 ответа

Ещё вопросы

затем укажите свойства для border-right / left / top / bottom, где бы вы ни хотели увидеть эффект
CSS border-image Свойство, если вы хотите одну боковую границу, вы можете попробовать, например, border-left-image-source: url(border1.png);
это тоже не работает ... Я хочу, чтобы мое изображение border.png ... отображалось как одно изображение ..... но код, который я пробовал, заставляет его появляться во всех 4 углах ....

Alessandro Incarnati · Answer 1 · 2013-12-02T09-49-00.000Z

Нет, пограничный образ-источник не поддерживается ни одним браузером.

Вместо этого используйте border-image:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

В твоем случае:

div.one
{
 border-style: inset;
 border-width:50px;
-webkit-border-image:url(border1.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border1.png) 30 30 round; /* Opera */
 border-image:url(border1.png) 30 30 round;
}

Проверьте эту скрипту: http://jsfiddle.net/65adr/55/

Попробуйте сейчас, я обновил ответ :)
он заполняет всю страницу, да ... мой вывод должен выглядеть как кнопка добавления комментария, которую вы видите справа от себя ... когда вы пытаетесь добавить комментарий .... но большого размера ... забудьте о тексте внутри это .... представьте как коробку с 4 угловыми линиями
Попробуйте поиграть с ним: jsfiddle.net/65adr/56

Rápli András · Answer 2 · 2013-12-02T09-37-00.000Z

0

border-image-source - это новое свойство CSS3, которое пока не поддерживается ни одним из браузеров. Используйте divs или что-то еще вместо того, чтобы содержать изображения.

Rápli András 02 дек. 2013, в 09:37

0

я планировал добавить border-image для элемента div, чтобы он работал в IE и firefox ... но он не работает ......
user2956454 02 дек. 2013, в 11:19
0

Забудь о бордюрах и прочем. Имитируйте границу, нажимая изображение влево, вправо, сверху и т. Д. Есть много решений для этого.
Rápli András 02 дек. 2013, в 11:20
0

Есть ли атрибуты для добавления изображений к границам таким образом ???
user2956454 02 дек. 2013, в 11:23

Показать ещё 1 комментарий

Mr.G · Answer 3 · 2013-12-02T08-30-00.000Z

Попробуйте это, он работает со всеми браузерами:

div.one
{
 border-style: inset;
 border-width:50px;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
 border-image:url(border.png) 30 30 round;
}

пожалуйста, установите ID класса для этого div. в противном случае используйте только это имя класса.
удалить стиль рамки: вставка, ширина рамки: 50 пикселей; две строки и проверь, все нормально работает.
попробуйте эту ссылку w3schools.com/css/tryit.asp?filename=trycss3_border-image
когда я удаляю эти атрибуты .. изображение исчезает
Попробуйте эту ссылку, она отлично работает: jsfiddle.net/gowthamk/c2RbC