Вообще существует множество способов делать скругленные углы, но нас интересует как в просилвере, чтобы легко можно было модифицировать стиль под свои задачи, а так же код легко вписывался в просилвер.
В просилвере скругленные края делаются очень просто - в уголки помещаются маленькие рисунки на которых изображены уголки цвета фона.
По умолчанию в просилвере фон белый. Обычно, если мы изменяем цвет фона, на котором лежит наш блок, то достаточно сменить картинку с уголками.
Но что делать, если один блок у нас на белом фоне, другой на зеленом и т д?
естественно заготовить несколько наборов изображений углов, и для всех прописать соответствующие классы в файлах css.
1. В просилвере используются файлы corners_right.png и corners_left.png
На их основе делаем свои изображения и помещаем их в папку theme\images\
Лучше всего назвать их со смыслом: например corners_right_green.png и corners_left_green.png или например corners_red_right.png и corners_red_left.png
В моем примере они названы my_corners_right.png и my_corners_left.png
2. Код нашего блока будет выглядеть вот так:
Код: Выделить всё
<div class="myblock">
<div class="inner"><span class="mycorners-top"><span></span></span>
Содержимое блока
<span class="mycorners-bottom"><span></span></span></div>
</div>
myblock - новый класс, в котором мы описываем параметры всего блока. У вас он будет называться как-то по другому.
mycorners-top класс, в котором описываются верхние уголки. У вас он будет называться по другому. Например corners-red-top
mycorners-bottom - аналогично
inner - оставляем как есть
3. Описываем эти классы в css :
Код: Выделить всё
.myblock {
background-color: #ebebeb;
padding: 0 10px;
}
span.mycorners-top, span.mycorners-bottom, span.mycorners-top span, span.mycorners-bottom span {
font-size: 1px;
line-height: 1px;
display: block;
height: 5px;
background-repeat: no-repeat;
}
span.mycorners-top {
background-image: none;
background-position: 0 0;
margin: 0 -5px;
background-image: url('./images/my_corners_left.png');
}
span.mycorners-top span {
background-image: none;
background-position: 100% 0;
background-image: url('./images/my_corners_right.png');
}
span.mycorners-bottom {
background-image: none;
background-position: 0 100%;
margin: 0 -5px;
clear: both;
background-image: url('./images/my_corners_left.png');
}
span.mycorners-bottom span {
background-image: none;
background-position: 100% 100%;
background-image: url('./images/my_corners_right.png');
}
.myblock span.mycorners-top, .myblock span.mycorners-bottom {
margin: 0 -10px;
}
Это содержимое начинается и заканчивается спанами с уголками. Спаны расширяются на всю ширину иннера, а благодаря отрицательным маргинам уголки уезжают наружу иннера и попадают в 10пиксельный промежуток между инннером и основным внешним блоком.
Это полностью рабочий пример, он работает даже в чистом html.
Но если вы будете использовать его в стилях на основе просилвера, то картинку на бекграунд лучше задавать другим способом:
Код: Выделить всё
background-image: url("{T_THEME_PATH}/images/my_corners_right.png");