Впервые использую border-image - не получается

[Temik2704]

Имеется блок div.

Имеется кусочек рамки вырезанный из фотошопа размером 4x3 пикс.

Цель:Сделать бордер картинкой.

 

Подскажите как правильно нужно сделать?

http://cssdeck.com/labs/x6m69b43

[Z1gnet]

почитайте тут, вроде доступно написано http://htmlbook.ru/css/border-image

[Temik2704]

  On 11/19/2013 at 10:58 PM, Z1gnet said:

почитайте тут, вроде доступно написано http://htmlbook.ru/css/border-image

Там написано подробно,но у меня нет полной картинки рамки,есть только ее кусочек,что делать тогда?

[Z1gnet]

Ну так у вас и так получились уголки http://prntscr.com/25fitx, или какого эффекта вы хотите достичь?

[Temik2704]

  On 11/20/2013 at 9:27 AM, Z1gnet said:

Ну так у вас и так получились уголки http://prntscr.com/25fitx, или какого эффекта вы хотите достичь?

Я хотел не уголки а чтобы весь бордер был как картинка,но с этим разобрался путем вырезания рамки из фотошопа.

 

Подскажите почему не хочет работать border-image в связке с border-top? (мне нужна полоса из бордера под каждым div)

http://cssdesk.com/xXWeC

 

Как сделать так чтобы он отображал по всей ширине элемента .post:after ?

[Catherine]

  On 11/19/2013 at 8:52 PM, Temik2704 said:

Имеется блок div.

Имеется кусочек рамки вырезанный из фотошопа размером 4x3 пикс.

Цель:Сделать бордер картинкой.

 

Подскажите как правильно нужно сделать?

http://cssdeck.com/labs/x6m69b43

У вас указан бордер шириной 2рх для всех сторон блока. Параметр, следующий за источником картинки в border-image, border-image-slice - задает размеры фрагментов для каждого участка бордера. У вас в коде указано одно значение, 2 - это значит, что исходное изображение, размером 4х3рх, судя по вашему коду, должно резаться на 9 одинаковых частей, каждое по 2х2рх. В результате левый верхний угол будет содержать уголок 2х2 пикселя левой верхней стороны картинки, правый - 2х2 пикселя с правого верхнего края, аналогично оставшиеся. Для остального бордера берется центральная часть картинки, а 4-4=0, так что ничего и не отображается. Я это как-то так понимаю.

 

Более подробное описание border-image можно почитать тут и тут, а тут хорошее описание border-image-slice

 

  On 11/20/2013 at 10:31 AM, Temik2704 said:

Подскажите почему не хочет работать border-image в связке с border-top? (мне нужна полоса из бордера под каждым div) http://cssdesk.com/xXWeC   Как сделать так чтобы он отображал по всей ширине элемента .post:after ?

 

В справочнике на хтмлбуке тут написано:

  Quote

Толщина рамки задаётся свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет.

А с рисунком ситуация,аналогичная описанной выше. Свойства border-image-top нет. Задайте, к примеру, псевдоэлементу не бордер, а повторяющийся фон. Для того, чтобы понять, что происходит, укажите border-image-slice, к примеру, не 4, а 1, или 2 1, но это наверняка не тот вариант, на который вы рассчитывали.

[Temik2704]

  On 11/20/2013 at 12:34 PM, Catherine said:

 

  On 11/19/2013 at 8:52 PM, Temik2704 said:

Имеется блок div.

Имеется кусочек рамки вырезанный из фотошопа размером 4x3 пикс.

Цель:Сделать бордер картинкой.

 

Подскажите как правильно нужно сделать?

http://cssdeck.com/labs/x6m69b43

У вас указан бордер шириной 2рх для всех сторон блока. Параметр, следующий за источником картинки в border-image, border-image-slice - задает размеры фрагментов для каждого участка бордера. У вас в коде указано одно значение, 2 - это значит, что исходное изображение, размером 4х3рх, судя по вашему коду, должно резаться на 9 одинаковых частей, каждое по 2х2рх. В результате левый верхний угол будет содержать уголок 2х2 пикселя левой верхней стороны картинки, правый - 2х2 пикселя с правого верхнего края, аналогично оставшиеся. Для остального бордера берется центральная часть картинки, а 4-4=0, так что ничего и не отображается. Я это как-то так понимаю.

 

Более подробное описание border-image можно почитать тут и тут, а тут хорошее описание border-image-slice

 

  On 11/20/2013 at 10:31 AM, Temik2704 said:

Подскажите почему не хочет работать border-image в связке с border-top? (мне нужна полоса из бордера под каждым div) http://cssdesk.com/xXWeC   Как сделать так чтобы он отображал по всей ширине элемента .post:after ?

 

В справочнике на хтмлбуке тут написано:

  Quote

Толщина рамки задаётся свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет.

А с рисунком ситуация,аналогичная описанной выше. Свойства border-image-top нет. Задайте, к примеру, псевдоэлементу не бордер, а повторяющийся фон. Для того, чтобы понять, что происходит, укажите border-image-slice, к примеру, не 4, а 1, или 2 1, но это наверняка не тот вариант, на который вы рассчитывали.

 

Спасибо за столь разверенутый ответ!