Бордеры в 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, чтобы показать, как проявляются стили в кривой.
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;
}
Если говорить честно, SVG имеет гораздо больший контроль над стилями границ, но мне нужно будет оставить это для другой статьи.
Спасибо за внимание, други! Буду надеятся что статья вам понравилась. Но если вдруг у вас появились вопросы по границам блока — не стесьняйтесь и задавайте их в комментариях.
До скорой встречи!
Навигация по записям
← Поисковые запросы Яндекса и их геозависимостьТема wordpress — Basic → 
Юрич:Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению. Не забудьте подписаться на обновления: Подписаться на новостиПохожие записи 
Как добавить CSS в WordPress, легкий путь 
Понимание Bootstrap: как это работает и что нового 
Создание адаптивного меню в WordPress для мобильных устройств 
Круглые изображения с помощью CSS3 
Адаптивная многоколоночная форма 
Выпадающее меню с подсказкамиОставить свой комментарий
Нажмите, чтобы отменить ответ.
Generic selectors Exact matches only Exact matches only Search in title Search in title Search in content Search in content Search in excerpt Hidden HiddenFilter by Categories HTML и CSS HTML и CSS Laravel Laravel Безопасность Безопасность Блоговедение Блоговедение Все о WordPress Все о WordPress Заработок в интернете Заработок в интернете Мысли вслух Мысли вслух Начинающим Начинающим Не по теме Не по теме Плагины WordPress Плагины WordPress Программирование Программирование Реклама в интернете Реклама в интернете СЕО СЕО Создание сайта на WP Создание сайта на WP Фриланс Фриланс
Больше результатов…
Подписаться на новости
Как создать галерею видео в WordPress
Что такое обмен ссылками в СЕО-продвиженииПонимание Bootstrap: как это работает и что нового Авторские права на материалы, размещенные на этом сайте, принадлежат авторам статей. Все права защищены и охраняются законом РФ. При использовании материалов с сайта ссылка на наш сайт обязательна. Если вы считаете, что публикация того или иного материала на нашем сайте нарушает законные права правообладателя.
© 2014 – 2022 Все права защищены
Заказать сайтВыберите тип сайта:Сайт-визиткаСайт компанииСайт для блогаИнтернет-магазинЯ согласен на обработку своих персональных данных
Комментарии закрыты.