Уроки HTML, CSS / Свойство стиля outline вывод рамок вокруг элементов

Привет друзья! Иногда бывает очень необходимо вывести рамку вокруг элементов, если использовать свойство стиля border – То оно меняет ширину элементов и дизайн может поехать. Поэтому тут нам на помощь приходит свойство стиля outline – она выводит рамку вокруг элементов без изменения их ширины – это очень удобно. 😊 Когда вы только начинаете изучать программирование сайтов – то нужно попробовать все стили на своем сайте – для обучения тому, как они отображаются и какие эффекты вы получаете. Используйте стили css3 - экспериментируйте и делайте классные сайты! ✅ outline: Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента. В отличие от линии, задаваемой через border, свойство outline не влияет на положение блока и его ширину. Также нельзя задать параметры линии на отдельных сторонах элемента, outline применяется сразу ко всем четырём сторонам. ✅ outline-style: Задает стиль внешней границы элемента. В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение. ✅ outline-offset: Устанавливает расстояние между рамкой, созданной с помощью свойства outline, и краем или границей элемента добавленной через border. Может принимать отрицательные значения. Ставь лайк, если тебе понравилось видео 👍 ►► Подписывайся на наш канал: #урокиhtml #урокиcss #урокиjavascript - Уроки от #OlegShpagin 👨🏼‍💻 Рекомендую посмотреть вот эти видео ► ★ [Эффекты при наведении мышки – например меняется картинка - css hover] ★ [Добавляем эффект полупрозрачности для элементов - opacity] ★ [Эффект бьющегося экрана TweenMax html2canvas / Почти как игра] ★ [Учим HTML за 30 минут, всего за пол часа вы сделаете свой первый сайт с нуля] ★ [Делаем новогодний курсор на сайте, вместо мышки елочная игрушка или новогодний шарик] ★ [Как отобразить другой сайт внутри вашего сайта, тег iframe] ★ [Что такое классы] ★ [Как скопировать стиль, с одного сайта на другой] ★ [Как добавить снег на сайт] ★ [Как сделать галерею картинок] ★ [Как вставить gif анимацию на сайт] ★ [Делаем сайт визитку за 5 минут! - от ИТ профессионала] ★ [Изучаем с нуля HTML за 1 час! Верстка для начинающих] Где нас можно найти ► -------------------------------------------- Вступай в группу Вк - 🚀 Группа FaceBook - Инстаграм Wiseplat: Instagram: Twitter - Популярные плейлисты ► -------------------------------------------- ● Уроки HTML/CSS. Учим быстро и эффективно! ● Уроки JavaScript. Изучаем основы языка и практикуемся сразу. ● Уроки jQuery. Для начинающих, с нуля ● Уроки Bootstrap для начинающих, с нуля учимся сразу делать классно! ● Уроки программирования для детей по Scratch ● Уроки программирования для детей и подростков на Python ► Уроки на сайте Wiseplat: -------------------------------------------- ✔ Сообщество программистов: ✔ Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: ******************************** ❤ Если Вам понравилась публикация, подписывайтесь на канал! 👍 Ставьте лайки, тогда будем еще создавать такой контент :) ✉ Если есть вопросы или пожелания, то пишите, в комментариях. ********************************