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

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

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

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

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

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

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

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

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

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

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

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

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

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

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

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

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

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

Источник