Телепорт
» » » Закруглённые углы через CSS

Закруглённые углы через CSS

Закруглённые углы через CSS


Наверняка, Вы часто встречали блоки с закруглёнными углами. За примером далеко ходить не надо, достаточно посмотреть вправо и приглядеться к моим блокам, у которых как раз углы и закруглены. Стоит отметить, что способов создания этого очень много. У каждого из них есть свои преимущества и недостатки, и я рассмотрю один из них, которым обычно и пользуюсь.

Для начала потребуются 4 изображения, каждое из которых отвечает за свой угол блока. Далее напишите такой HTML-код:
 
  
    
      
        
          
        
      
    
  


И такой CSS-код:
.roundborder {
  border: 2px solid #ffd460;
}
.roundborder div {
  background: url(../images/t-l.png) top left no-repeat;
  margin: -2px;
  position: relative;
}
.roundborder div div {
  background: url(../images/t-r.png) top right no-repeat;
  margin: 0;
}
.roundborder div div div {
  background: url(../images/b-r.png) bottom right no-repeat;
}
.roundborder div div div div {
  background: url(../images/b-l.png) bottom left no-repeat;
  padding: 20px;
}


По названию картинок, думаю, что их назначение понятно, однако, на всякий случай поясню:

t-l - верхний левый угол
t-r - верхний правый угол
b-l - нижний левый угол
b-r - нижний правый угол

Свойство padding Вы можете задавать своё, так как оно всего лишь делает отступ контента от закруглённой рамки. Также обратите внимание, свойство border должно быть толщиной с рамкой в картинке, а свойство margin: -2px, возможно, так же придётся поменять, поскольку это значение должно равняться ширине картинки, взятой со знаком минус.

Вот таким несложным способом делаются закруглённые углы через CSS. Большим преимуществом данного способа является то, что он является кроссбраузерным. А в качестве минуса я бы отметил большое количество div.


Скачивание доступно только для зарегистрированных
НАШИ НОВОСТИ
Опубликовано 04 апрель 2014
Представляю вашему вниманию шаблон онлайн кинотеатра с глубокой настройкой под свои нужны OST-ARENA.RU Читать далее...
Опубликовано 18 март 2014
Представляю вашему вниманию, адаптивный новостной шаблон Reades News. Адаптивный дизайн подразумевает, что шаблон будет одинаково корректно отображаться во всех устройствах. Шаблон отлично подойдет для медийных новостей и не только. Обязательно посмотрите видеозапись работы Читать далее...
Опубликовано 16 март 2014
Дизайн Zerotheme, адаптирован для DLE 10.1 by Yurets. Шаблон zBoomMusic позиционируется как шаблон для музыкального портала или музыкального блога. Вверху шаблона расположен слайдер, под слайдером Топ новостей, далее последние добавленные новости. Читать далее...