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

Статья читается: 1 мин.

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

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

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

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

osnovnye-css-granicy

Каждый элемент 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, чтобы показать, как проявляются стили в кривой.

  • 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 аналогичным образом ограничены, и выглядят «фальшиво» если значение толщины линии задано слишком мало.

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

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

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

emma-flashdance

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

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

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

Вам понравилась статья?
плохохорошо (Пока оценок нет)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на ВордПресс более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!