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

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

    Опрос

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



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

    Архив новостей
    Март 2022 (1)
    Декабрь 2021 (1)
    Август 2021 (1)
    Июль 2021 (3)
    Февраль 2021 (3)
    Январь 2021 (1)

    Информация
    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, DLE, DLE хаки, domoticz, dzvents, Home Assistant, HomeAssistant, Linux, log, Monster, ogf3, RDP, Template, VBS, w2k8, windows, WSH, xiaomi, бумага, бумажный самолетик, верстка, иструкция, Карты, кино, Навигация, оригами, программа, рецензия, рецепт, скрипт, фигуры, шаблон, Яндекс, яндекс-карты

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