Основные CSS Границы

Привет, друзья мои!

Опять давненько не писал интересного в свой блог, так как накопилось много дел и работы. Но сегодня решил отметиться новой статьей о границах блоков (и не только) в HTML.

Какими они бываю, какие стили используют, как цвет и толщина влияет на отображение в браузере – все эти вопросы мы осветим в этой статье.

Погнали, короче!

Основные CSS Границы

Каждый элемент HTML может быть снабжен границей (бордером, от английского border), которая задается через CSS, использую один из десяти стилей: none , hidden , solid , dashed , dotted , groove , ridge , double , inset и outset. Также есть еще три стиля границ: wave , dot-dash и dot-dot-dash, но их еще не поддерживает ни один из современных браузеров на момент написания поста.

Толщина границ в CSS обычно задается пикселях (px), также как и практически все единицы в дизайне сайта. С технической точки зрения border-width может быть задан любой единицей измерения, поддерживаемые браузером, за исключением процентов. Цвет границы также может быть определен любым цветом, изпользуемым в CSS, а также допускается возможность полупрозрачных границ.

Читайте также на Posovetujte.ru:  Начало работы с Redux Framework. Часть вторая.

Наиболее распространенный способ определения границ задается значениями, разделенных пробелами:

border: style thickness color; (стиль, толщина границы, цвет границы)

В примерах ниже я добавил небольшой border-radius, чтобы показать, как проявляются стили в кривой.

  • border: 4px solid #222

  • border: 4px dashed #222

  • border: 4px dotted #222

  • border: 4px groove #222

  • border: 4px ridge #222

  • border: 4px double #222

  • border: 4px inset #222

  • border: 4px outset #222

  • Вы заметили, что стиль double особенно чувствителен к толщине, распределяя сумму заданного значения между внутренним и внешним краями и пространством между ними. Ridge и groove являются так же чувствительны к цвету, используя производные оттенки тона, установленного значения для внутренней и внешней кромки. По этой причине, используйте «чистые» цвета: белый, черный а некоторые оттенки – вообще не рекомендуется использовать, так как это снижает способность браузера, чтобы создать достойный визуальный эффект. Inset и outset аналогичным образом ограничены, и выглядят “фальшиво” если значение толщины линии задано слишком мало.

    Читайте также на Posovetujte.ru:  WP-Protect — плагин защиты от копирования текстов

    Границы могут быть применены к каждой стороне элемента по отдельности, например border-left, border-bottom и т.д., используя тот же синтаксис CSS. Это может быть разбито и дальше: border-right-color и border-left-width и т.д.

    Для этого приведу один пример, где уровень детализации можно было бы использовать на странице, создавая рамку Polaroid для фотографии с границами, как это показано в самом низу этой статьи (в которой толщина нижнего края отличается от других трех сторон), задается с помощью следующих стилей CSS:

    img.polaris {
    border: 25px solid #e8e8d3;
    border-bottom-width: 50px;
    }

    Основные CSS Границы

    Если говорить честно, SVG имеет гораздо больший контроль над стилями границ, но мне нужно будет оставить это для другой статьи.

    Спасибо за внимание, други! Буду надеятся что статья вам понравилась. Но если вдруг у вас появились вопросы по границам блока – не стесьняйтесь и задавайте их в комментариях.

    До скорой встречи!

    Статья была обновлена: 03 января 2017 года
    Источник

    Оставьте первый комментарий

    Оставить комментарий