Рамка вокруг аватара

Добрый день, ковыряюсь с рамкой форума по этому топику https://help.forum2x2.ru/t19813-topic#155247
Воспользовалась бордер-имейдж

Не до конца поняла на счет цсс и у меня получилось это:

Код:

/*Автоматическая рамка аватаров*/
  .avabor img {

border-width: 26px;
-moz-border-image: url(http://s020.radikal.ru/i704/1508/ab/ee13415e4de5.png) 87 81 91 83 repeat round;
-webkit-border-image: url(http://s020.radikal.ru/i704/1508/ab/ee13415e4de5.png) 87 81 91 83 repeat round;
-o-border-image: url(http://s020.radikal.ru/i704/1508/ab/ee13415e4de5.png) 87 81 91 83 repeat round;
border-image: url(http://s020.radikal.ru/i704/1508/ab/ee13415e4de5.png) 87 81 91 83 fill repeat round;
  
}

А на форуме - вот это:


Как сделать, чтоб было нормально?

Вопрос все еще актуален и нуждается в решении с Вашей помощью, спасибо.

Уменьшаете число 26. Я так поняла, что вы хотите рамку поменьше.

Дело в том, что уменьшая число 26, я утоньшаю рамку, а не приближаю ее к аватару!

Посмотрела на картинку - где вы рамку делаете.
Очень свободного места. Двигаете рычажки.
А также - Border size

в цсс ставлю это:

Код:

/*Автоматическая рамка аватаров*/
.avabor img {

border-style: solid;
border-width: 58px 61px 60px 55px;
-moz-border-image: url(http://s015.radikal.ru/i332/1509/8c/789523a2c99b.png) 58 61 60 55 repeat;
-webkit-border-image: url(http://s015.radikal.ru/i332/1509/8c/789523a2c99b.png) 58 61 60 55 repeat;
-o-border-image: url(http://s015.radikal.ru/i332/1509/8c/789523a2c99b.png) 58 61 60 55 repeat;
border-image: url(http://s015.radikal.ru/i332/1509/8c/789523a2c99b.png) 58 61 60 55 repeat;
}
    

Рамка выглядит так, которую хочу установить, нужно, чтоб она имела внутреннюю тень.


Но получается вот такая ерунда.

Код:

http://s50.radikal.ru/i130/1509/9e/0b9e2ba13cf2.png

Если я уменьшаю значение border-width, то рамка превращается в тоненькую ниточку:


Скажите уже, Христа ради, знающие и сведущие люди, что в этом коде в css надо поменять, чтоб у меня получился вот такой результат?

Код:

border-style: solid; border-width: 51px 51px 51px;
-moz-border-image: url(http://s013.radikal.ru/i323/1509/2d/429c627352e7.png) 14 14 14 repeat;
-webkit-border-image: url(http://s013.radikal.ru/i323/1509/2d/429c627352e7.png) 14 14 14 repeat;
-o-border-image: url(http://s013.radikal.ru/i323/1509/2d/429c627352e7.png) 14 14 14 repeat;
border-image: url(http://s013.radikal.ru/i323/1509/2d/429c627352e7.png) 14 14 14 fill repeat;

Не говорю, что это то, что вы хотите. У меня такое и рамка толстая)))
Я эту картинку, что вы загрузили делала.
Но вы сами должны регулировать.
ЕСТЬ BORD SIZE.
Вы не используете/
И ещё циферки должны быть одинаковы, потому что ваша рамка одинакова по толщине со всех сторон.

Для наглядности картинка

тЫк:

дак если я сделаю, как вы указали, у меня уголки обрежутся у рамки

Сделала, как вы посоветовали.

Код:

/*Автоматическая рамка аватаров*/
.avabor img {
border-style: solid;
border-width: 44px;
-moz-border-image: url(http://s013.radikal.ru/i323/1509/2d/429c627352e7.png) 52 repeat;
-webkit-border-image: url(http://s013.radikal.ru/i323/1509/2d/429c627352e7.png) 52 repeat;
-o-border-image: url(http://s013.radikal.ru/i323/1509/2d/429c627352e7.png) 52 repeat;
border-image: url(http://s013.radikal.ru/i323/1509/2d/429c627352e7.png) 52 repeat;
}
   

Вот результат:


Получилась та же дребедень и если менять border-width: 44px; на меньшее, то рамка не приближается к аватару, а становится тоньше, потому как это меняет ее ширину, но как ее сделать в облипку с аватаром?

Валькирия Сан пишет:дак если я сделаю, как вы указали, у меня уголки обрежутся у рамки

Я на глаз делала, вместо 14 поставьте другие числа.

Пасека пишет:
Я на глаз делала, вместо 14 поставьте другие числа.

https://help.forum2x2.ru/t38566-topic#263646 в этом посте сделала, как вы сказали, результат неудачен. Что то не так.

Код:

border-style: solid;
border-width: 25px;
-moz-border-image: url(http://snapsnap.ru/photos/20150904144131609216161.png) 25 stretch;
-webkit-border-image: url(http://snapsnap.ru/photos/20150904144131609216161.png) 25 stretch;
-o-border-image: url(http://snapsnap.ru/photos/20150904144131609216161.png) 25 stretch;
border-image: url(http://snapsnap.ru/photos/20150904144131609216161.png) 25 stretch;

Рамка ваша 200 пиксель, я увеличила 500 пиксель

Вы меня как будто не слышите и не понимаете, чего я пытаюсь добиться. Это результат, который меня не устраивает.
Мне нужен вот такой результат, как я уже говорила постом выше:


Но максимум, что я смогла сделать, это:

Рамка должна остаться такой, как вы ее видете на картинке с девушкой, но она должна быть не на расстоянии от аватара, а обтекать его, как на картинке выше.

Вы, как я поняла, хотели рамку потолще.
Или нет???
Значит поняла плохо.

Такое вас устроит???


Если да - напишу код.

Валькирия Сан, вот именно так —



не получится в принципе:
1) для этого бы border' у пришлось бы лежать поверх картинки, чтобы перекрывать ее тенью, а он может обрамлять только стык в стык
2) уголки не могут быть шире и выше, чем фрагмент бокового обрамления, т.к. "пустое пространство", образующееся в углах внутри, влияет на ширину боковых частей.



А то, что Вы хотите, можно сделать только одним способом: зафиксировать размеры всех аватаров и рамку (с тенью, фиксированного размера) накладывать поверх них.

Dana Domirani пишет:А то, что Вы хотите, можно сделать только одним способом: зафиксировать размеры всех аватаров

Извините, что в этой теме.
Как зафиксировать размер аватаров так, чтоб, например, меньше 150 пиксель по ширине не вставляли?

Решение своей проблемы я нашла. Тему можно закрывать.

Код:

/*Автоматическая рамка аватаров*/
.avabor img {

margin-left: 6px;

border-width: 8px;
-moz-border-image: url(http://s020.radikal.ru/i702/1509/33/65cf42604695.png) 8 repeat;
-webkit-border-image: url(http://s020.radikal.ru/i702/1509/33/65cf42604695.png) 8 repeat;
-o-border-image: url(http://s020.radikal.ru/i702/1509/33/65cf42604695.png) 8 repeat;
border-image: url(http://s020.radikal.ru/i702/1509/33/65cf42604695.png) 8 repeat;
box-shadow: 0 0 5px black;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

Можно смело загружать не только квадратное изображение, но и прямоугольное. Главное, что значения, которые у меня стоят 8 пикселей, их менять нужно на ту ширину, какой ширины ваша рамка. И все отлично получилось.

Это же совсем другая рамка сейчас. У неё внутренние углы 90°, без внутренних завитушек
И она впритык пойдёт к аватарке. Значение не имеет - квадратная или прямоугольная.
А вот с завитушками, нужно немного отступить, чтоб их не обрезать.
Я уже думала, что можно небольшой отступ заполнить внутренней тенью.

Не, я уже поняла, что с завитушками не получится и убрала их.