Пользователь
0,0
рейтинг
7 апреля 2012 в 17:05

Разработка → Все о свойстве border перевод

Все знакомы с css параметром border, но есть ли вещи, которые мы не знаем о нем?

Основы


Всем знакомо такое использование:
border: 1px solid black;

Это однопиксельная сплошная рамка. Немного меняем синтаксис:
border-width: thick;
border-style: solid;
border-color: black;

Например у параметра border-width есть три параметра: thin, medium, thick:

Если необходимо менять цвет границы при наведении на объект:

.box {
    border: 1px solid red;
}
.box:hover {
    border: 1px solid green;
}

Но так это реализовать проще и правильнее:
.box {
    border: 1px solid red;
}
.box:hover {
    border-color: green;
}

Border-Radius


border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Для каждого угла можно назначить свое закругление:
border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 0;


В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
Всю конструкцию можно сжать в одну строку:
/* top left, top right, bottom right, bottom left */
border-radius: 20px 0 30px 0;

А вот как можно нарисовать лимон средствами CSS:
.lemon {
   width: 200px; height: 200px; 
   background: #F5F240;
   border: 1px solid #F0D900;
   border-radius: 10px 150px 30px 150px;
}


Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.

Несколько границ


Border-Style

solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.
border: 20px groove #e3e3e3;

Или более подробно:
border-color: #e3e3e3;
border-width: 20px;
border-style: groove;


Outline

Самый популярный способ создания двойной границы — это параметр outline:
.box {
   border: 5px solid #292929;
   outline: 5px solid #e3e3e3;
}


Этот способ отлично работает, но ограничен созданием двойной рамки. Если вам необходимо отобразить несколько границ элемента, то необходимо использовать другую технику.
Псевдоэлементы

Можно использовать такую конструкцию:
.box {
  width: 200px; height: 200px;
  background: #e3e3e3;
  position: relative;
  border: 10px solid green;
}
/* Create two boxes with the same width of the container */
.box:after, .box:before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
.box:after {
  border: 5px solid red;
  outline: 5px solid yellow;
}
.box:before {
  border: 10px solid blue;
}


Возможно это не самое элегантное решение, однако оно работает
Box-Shadow

Еще один способ, с применением теней:
.box {
    border: 5px solid red;
     box-shadow:
       0 0 0 5px green,
       0 0 0 10px yellow,
       0 0 0 15px orange;
}


Изменение углов


К параметру border-radius можно применять два значения, используя "/", например:
border-radius: 50px / 100px; /* horizontal radius, vertical radius */

Это то же самое, что:
border-top-left-radius: 50px 100px;
border-top-right-radius: 50px 100px;
border-bottom-right-radius: 50px 100px;
border-bottom-left-radius: 50px 100px;

Эта техничка бывает полезна, если необходимо имитировать искривление, а не закругление. Например, так можно получить эффект скрученной бумаги:
.box {
    width: 200px; height: 200px;
    background: #666;
    border-top-left-radius: 15em 1em;
    border-bottom-right-radius: 15em 1em;
}


CSS фигуры


В следующих примерах предполагается такая разметка:
<div class="box"></div>

И такой базовый css:
.box {
   width: 200px;
   height: 200px;
   background: black;
}

Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:
.arrow {
  width: 0; height: 0;
  border-top: 100px solid red;
  border-right: 100px solid green;
  border-bottom: 100px solid blue;
  border-left: 100px solid yellow;
}

Или то же самое:
.arrow {
  width: 0; height: 0;
  border: 100px solid;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

Или так:
.arrow {
  width: 0; height: 0;
  border: 100px solid;
  border-color: red green blue yellow;
}


А теперь оставляем только синий треугольник:
.arrow {
  width: 0; height: 0;
  border: 100px solid;
  border-bottom-color: blue;
}



Создание Speech Bubble


Наша базовая разметка:
<div class="speech-bubble">Hi there!</div>

И стили:
.speech-bubble {
    position: relative;
    background-color: #292929;
    width: 200px;
    height: 150px;
    line-height: 150px; /* vertically center */
    color: white;
    text-align: center;
}


Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:
.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: red green blue yellow;
}


Оставляем только четверть квадратика:
.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid;
  border-top-color: red;
}


Теперь перемещаем ниже и закрашиваем:
.speech-bubble {
   /* … other styles */
   border-radius: 10px;
}
.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
  border-top-color: #292929;
  top: 100%;
  left: 50%;
  margin-left: -15px; /* adjust for border width */
}


Примеры применения:
/*
   Speech Bubbles
   Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION
   <div class="speech-bubble speech-bubble-top">Hi there</div>
*/
 
.speech-bubble {
  position: relative;
  background-color: #292929;
  width: 200px;
  height: 150px;
  line-height: 150px; /* vertically center */
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
}
 
.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
}
 
/* Position the Arrow */
 
.speech-bubble-top:after {
  border-bottom-color: #292929;
 
  left: 50%;
  bottom: 100%;
  margin-left: -15px;
}
.speech-bubble-right:after {
  border-left-color: #292929;
 
  left: 100%;
  top: 50%;
  margin-top: -15px;
}
 
.speech-bubble-bottom:after {
  border-top-color: #292929;
 
  top: 100%;
  left: 50%;
  margin-left: -15px;
}
 
.speech-bubble-left:after {
  border-right-color: #292929;
  top: 50%;
  right: 100%;
  margin-top: -15px;
}


Вертикальное центрирование текста

минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:
.speech-bubble {
 /* other styles */
  display: table;
}
.speech-bubble p {
  display: table-cell;
  vertical-align: middle;
}


Еще один пример нестандартного использования границ:
.biohazard {
  width: 0; height: 0;
  border: 60px solid;
  border-radius: 50%;
  border-top-color: black;
  border-bottom-color: black;
  border-left-color: yellow;
  border-right-color: yellow;
}


Итог


Использование параметра border не ограничивается одним лишь «1px solid black», с помощью границ можно создавать различные фигуры, причем достаточно один раз написать CSS-класс и применять его к множеству элементов на странице.
Перевод: Jeffrey Way
Кирилл @grokru
карма
405,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (65)

  • –37
    Это перевод, почему вы стесняетесь указывать ссылку на оригинал?
    • +25
      Указан же ниже, не?
      • +5
        Извините, раньше было сразу понятно.
        • +15
          Раньше — это в каком году?
          • 0
            …до весеннего обновления Хабра, полагаю.
            • +6
              Извините, но до весеннего обновления было также.
    • +21
      Дорогие люди, в каждом без исключения топике-переводе появляется этот комментарий — «а где ссылка». Разберитесь уже в конце концов в интерфейсе Хабра и перестаньте безосновательно обвинять переводчиков в плагиате.
      • +33
        Я вот, например, довольно давно на хабре, и знаю, где находится эта самая ссылка, но так до сих пор так и не привык ее быстро находить. Вижу, что я не один такой.

        И раз в каждом топике находится как минимум один такой, кто не находит, то может это не они все идиоты, а просто ссылка сделана незаметно, а?

        Можно просто сделать еще одну строчку, перед тэгами, например, и там написать «Источник:» или «Оригинал:».

        А?
        • +3
            Да-да, я тоже давно об этом говорил. Говорит о том, что интерфейс пометок о переводах несовершенен, просто признак незаметен читателю. И несколько месяцев назад в своих юзерскриптах сделал более явное выделение того, что статья обозначена как перевод.
            Сейчас это на Хабре — не очень понятная иконка «Z-Я». «Ну Z-Я», подумает читатель и пропустит как непонятное. Потому что содержание гораздо интереснее, и всё внимание переключено туда. Чтобы не всматриваться пристально в вид иконок, я просто пометил переводы синеватым фоном в заголовке.

          Разницы совсем немного, но при чтении обращаешь внимание, что фон — синеватый. (То же — для топиков-ссылок, фон зеленоватый.) Вполне нормально помогает. Скрипт здесь: userscripts.org/scripts/show/121690, настройка скрипта, отвечающая за эту фичу — "подкраска переводов, топиков-ссылок, компаний", по умолчанию включена. (с ней ещё имена компаний подкрашиваются в заголовках, ныне — в «хабах»).
          • +1
            И забыл сказать о следующей «суперфиче» по этому поводу. Клик по значку «Z-Я» в списке статей приводит к переходу на оригинал в новом окне (правда, это не очевидно и сам об этом не помню), а на странице статьи справа вверху появляется дубль информации — дата, автор и автор оригинала. Клик по автору оригинала — тоже переход на оригинал. Таким образом, и вверху, и внизу статьи есть ссылка на оригинального автора, а чтобы она по цвету несколько отличалась от автора статьи (переводчика) — сделано так:

            Цвет едва заметно, но отличается от цвета автора. Этого достаточно.
        • +2
          Поддержку, тоже после прочтения комментария начал искать ссылку.
          Она маскируется под ссылку на страницу автора, где естественно оригинал на перевод не собираешься находить, поэтому она интуитивно пропускается.
        • +2
          Я тоже тут не первый месяц, но тем не менее вижу перевод сразу. ЧЯДНТ?
          • –2
            Перевод очень просто определить по стилистике текста: с самого начала начинают встречаться топорные обороты, дословно или полудословно взятые из оригинала. А пометка о переводе внизу текста служит для меня лишь окончательным подтверждением.
            • 0
              "… во время поиска квартиры, видел один безумно дорогой дом, который я естественно не снял, но в нём, в частности, была устроена специальная огромная солнечная батарея, питающая электрическую сушку для белья. Не могу не поразиться техническим гением, решившим столь сложную задачу получения такого большого количества электрической энергии от солнца, а так же тем, что даже я знаю способ использования солнца для сушки белья ПРОЩЕ." (с) Китя Карлсон.
              • 0
                Вот я и говорю: перевод чаще всего гораздо проще определить по самому тексту, нежели лазить вокруг в поисках крупиц метаинформации.
            • +2
              Перевод очень легко определить по иконке, изображённой слева от заголовка. Ваш К.О.
          • 0
            Если Вы можете сразе же слету определить, две маленькие красненькие надписи среди большого количества других мелких элементов, или одна — могу только позавидовать Вашему зрению.
            • 0
              Спасибо. У меня действительно стопроцентное зрение.
        • 0
          Я вот, например, довольно давно на хабре, и знаю, где находится эта самая ссылка, но так до сих пор так и не привык ее быстро находить. Вижу, что я не один такой.

          А её и не надо быстро находить. Просто перед тем, как обвинять автора в плагиате — необходимо проверить, не перевод ли это
          • +1
            Я автора ни в чем не обвинял. Однако думаю, что желающих перейти на оригинал текста гораздо больше, чем поглядеть на карму автора или, скажем, сделать что-то-там с фейсбуком или вконтактом.
            • 0
              А я и не про вас)
    • 0
      Спор о переводе и проблемах его отображения, чуть ли не больше, чем обсуждение статьи...)
      Статья то, между прочим классная, про скругление например вообще не знал.
      Как-то напыщено звучат вопли про перевод.
  • +2
    ИМХО: Хорошая памятка.
  • +5
    Отлично, спасибо. Вначале конечно всё банально, но дальше — прекрасно. Еще раз спасибо.
    • +2
      Tooltip готов! =)
  • +2
    самый последний пример сильно удивил, спасибо.
  • –6
    интересно, есть над чем поработать)
    спасибо)
  • –2
    И где Вы были раньше, здорово описано, но обычно юзаю не более 3-4 пикселей в радиусе, сильные закругления как-то не очень радуют, выглядят как-то по-детски, мультяшно что-ли
  • –12
    Да провалиться мне сквозь землю, если я tooltip так буду верстать. Микроскопом тоже можно сваи заколачивать, но никто же так не делает
    • +17
      Cool story
  • 0
    А как с кроссбраузерностью? сглаживание углов работает ли или пиксельными ступеньками наклнная линия рисуется?
  • –2
    .lemon {

    }

    :-)
  • +2
    oh shi...!

    Никогда бы не подумал что у border может быть столько применений и что с его помощью можно такие вещи творить.

    Однозначно запись в закладки.
  • +2
    не хватает, как минимум свойства border-image
    есть даже сервис, для его генерации border-image.com
  • +1
    Огромное спасибо за статью. Начинающим дизайнерам — отличная памятка.
    Да и не только начинающим. Хоть и не всегда необходимо так извращаться с «border» =)
    • +5
      Скоро будут профессии css кодеры. Перевод JPG в вектор кросбраузерно.
  • +1
    Только вот biohazard тут ни при чём.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Разве что в названии последнего класса
        • НЛО прилетело и опубликовало эту надпись здесь
      • –2
        Последняя (она же первая) картинка.
  • +1
    Нужные вещи. В избранное…
  • +2
    К сожалению, использование border+outline для двойной границы — ненадежный метод.
    Браузеры по разному интерпретируют само понятие outline, если свойство overflow у блока отлично от умолчального.
    • НЛО прилетело и опубликовало эту надпись здесь
  • +3
    Вообще-то, border и outline это не параметры, а свойства. И жаль, что автор забыл про не самый очевидный способ гибкого закругления блоков: border-radius:50%
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Значит не в самом очевидном месте. Там, где круги — об этом не говорится. Тексткейсы?
        • НЛО прилетело и опубликовало эту надпись здесь
  • +16
    «Суровые питерские верстальщики используют не border, а поребрик»
    • –2
      не хочу вас огорчать, но все с точностью — наоборот :)
      • +1
        Нет, это вы ошибаетесь. :)
        • –1
          Везде где я бывал по России, везде бортовой камень называют поребриком.
          И только в Питере его при мне называли бордюром — где ошибка с моей стороны?
          • 0
            Не знаю где вы были, но у меня в точности наоборот.
            • 0
              А вы откуда?
              • 0
                Сургут
  • 0
    Я когда-то схлопотал милый факап – нужно было сделать прямоугольник, сверху от которого торчал треугольник, и оба эти элемента обведены поребриком. Получилось вот что: dabblet.com/gist/1630070
  • +3
    Очень понравился лимон. Сделал версию лимона, созревающего при наведении мыши. :)

    .lemon {
        margin-top: 25px;
        margin-left: auto;
        margin-right: auto;
        width: 200px;
        height: 200px;
        background: #00d519;
        border: 1px solid #00a714;
        -webkit-border-radius: 10px 150px 30px 150px;
        -moz-border-radius: 10px 150px 30px 150px;
        border-radius: 10px 150px 30px 150px;
        -webkit-transition: background-color 1s ease-in-out, border-color 1s ease-in-out;
        -moz-transition: background-color 1s ease-in-out, border-color 1s ease-in-out;
        -o-transition: background-color 1s ease-in-out, border-color 1s ease-in-out;
        transition: background-color 1s ease-in-out, border-color 1s ease-in-out;
        -webkit-box-shadow: #ccc 0 0 15px;
        -moz-box-shadow: #ccc 0 0 15px;
        box-shadow: #ccc 0 0 15px;
    }
    
    .lemon:hover {
        background-color: #F5F240;
        border-color: #F0D900
    }
    
  • 0
    Пример с псевдоэлементами не заработал с pre почему-то. упорно по высоте в один символ и минимален по ширине, вместо того, чтобы обёртывать контейнер.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.