Сделать стартовойДобавить в закладки  
Главная страничка Главная страничка
В номере:

Выходит с 17 июля 2008 г. цена договорная

Опрос

Windows Mobile
Symbian
Android
iPhone
Linux
другая
не знаю
у меня обычный телефон



Календарь
«    Октябрь 2009    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031 

Архив новостей
Май 2019 (2)
Март 2019 (1)
Январь 2019 (1)
Декабрь 2018 (1)
Ноябрь 2018 (3)
Октябрь 2018 (2)

Информация
DIV закругленные углы блока
Web » css
автор: dimon, опубликовано: 14 октября 2009

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

Однако, такое решение имеет свои плюсы и минусы.
Из плюсов главный - возможность рисовать углы любой сложности и конфигурации.
Из недостатков – увеличение нагрузки на сервер, не лучший вид страницы при отключении отображения картинок.

Второе решение скругление уголков без использования изображений основано только на HTML и CSS. Такое решение используется в GMail-е.
Недостаток такого решения – некоторая корявость кода и пиксализация скругленных углов.

Код:
<style type="text/css">

div {}
.RC-container {  
  color:  Azure;
}

.RC-content {
  background-color: Azure;
  color:  Blueviolet;
  padding: 5px;
}

.RC-1, .RC-2, .RC-3, .RC-4 {
  background-color: Azure;
  color: Blueviolet;
  height: 1px;
  font-size: 1px;
  overflow: hidden;
}

.RC-1 {
  margin: 0 5px;
}

.RC-2 {
  margin: 0 3px;
}

.RC-3 {
  margin: 0 2px;
}

.RC-4 {
  margin: 0 1px;
  height: 2px;
}
</style>

<div style="width: 300px;">

    <div class="RC-container">
      <div class="RC-1"> </div>
      <div class="RC-2"> </div>
      <div class="RC-3"> </div>
      <div class="RC-4"> </div>
    </div>

    <div class="RC-content">Попробуйте этих мягких булочек...<br>Попробуйте этих мягких булочек...<br>:-)</div>

    <div class="RC-container">
      <div class="RC-4"> </div>
      <div class="RC-3"> </div>
      <div class="RC-2"> </div>
      <div class="RC-1"> </div>
    </div>

</div>



А вот как это выглядит на практике:

Попробуйте этих мягких булочек...
Попробуйте этих мягких булочек...
:-)


Принцип формирования - создание блоков высотой 1px и последоватьльное расширение/сужение их по горизонтали.

 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Чтобы Вам были доступны все функции Вам необходимо либо зарегистрироваться, либо зайти на сайт под своим именем.

Другие новости по теме:

  • Простенький трёхколонный резиновый макет на div-ах
  • Как заставить min-height работать
  • DIV прямоугольные блоки - положение друг относительно друга
  • Тег DIV - прямоугольный блок
  • DLE хаки: Отступ между картинками


  • Комментарии:

    #1 написал: serzhen77 (14 апреля 2010 01:08)
    спасибо!


     
    Информация
     
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


    Поиск по сайту:


    Облако тегов
    Android, Arduino, backup, CentOS, cmd, css, div, DLE, DLE хаки, domoticz, dzvents, LCD, Linux, log, LUA, Monster, ogf3, RDP, Template, VBS, w2k8, windows, WSH, бумага, бумажный самолетик, верстка, иструкция, Карты, кино, Навигация, оригами, программа, рецензия, рецепт, скрипт, фигуры, шаблон, Яндекс, яндекс-карты

    Показать все теги
    Реклама
    раскрутка сайта бесплатно
    Главная страница | Регистрация | Добавить новость | Новое на сайте | Статистика | Поддержка | Правила ресурса Copyright © 2005-2018 by dimon - all right reserved!
    Тираж:       Счетчик тИЦ и PR     экземпляров.   Дизайн, верстка by dimon