1. Концепция
Контур — это линия, нарисованная вокруг элемента, расположенная за пределами границы, для выделения элемента.
Например: когда мы обычно читаем контент в браузере, когда щелкаем мышью, чтобы сфокусироваться на ссылке тега или переключателе ввода, элемент будет окружен контурной пунктирной рамкой. Этот пунктирный прямоугольник является контуром.
По умолчанию, когда вы щелкаете тег, вводите или добавляете событие щелчка мыши, браузер оставляет контурную рамку (синюю под хромом). Однако эти рамки по умолчанию иногда влияют на внешний вид и разрушают общий эффект интерфейсной страницы. На самом деле мы не хотим их сохранять. Итак, как удалить контурную рамку браузера по умолчанию или изменить эффект контурной рамки по умолчанию?
Свойство CSS Outline определяет стиль, цвет и ширину контура элемента.
Контуры и границы внешне очень похожи, но между ними есть различия, например:
(1) Стиль, ширина и цвет границы в четырех направлениях элемента могут быть установлены независимо, но ширина, стиль и цвет контура в четырех направлениях элемента одинаковы и не могут быть установлены. индивидуально;
(2) Ширина границы будет напрямую влиять на размер элемента, при этом контур не будет занимать пространство страницы и не будет влиять на макет страницы, но контур будет перекрываться с другими элементами на странице;
(3) Помимо перекрытия звука окружающих элементов, контур не влияет на окружающие элементы;
(4) Граница является частью размера элемента, а контур — нет. Это означает, что независимо от ширины контура размер элемента не изменится;
(5) Контур может быть непрямоугольным, но вы не можете напрямую создать круговой контур.
2. Свойства
Чтобы задать контур элемента, вы можете использовать следующие свойства:
(1) Структура: установите все атрибуты структуры в одном операторе, атрибут сокращения структуры. Вы можете использовать атрибут структуры, чтобы одновременно установить три вышеуказанных атрибута структуры;
цвет контурастиль контураширина контуранаследовать
●Значения структуры могут быть перечислены в любом порядке, и эти значения можно игнорировать.
● Синтаксис JavaScript.
object.style.outline=#0000FFточечныйтонкий
(2) цвет контура: установите цвет контура;
имя-цветашестнадцатеричный-номерrgb-номеринвертиннаследование
●Примечание. Всегда объявляйте атрибут стиля контура перед атрибутом цвета контура. Цвет контура элемента можно изменить только после того, как он получил свой контур.
●Атрибут Outline-Color задает цвет видимой части всего контура элемента.
● Синтаксис JavaScript.
object.style.outlineColor=#0000FF
(3) стиль контура: установите стиль контура;
неотмеченныйпунктирныйсплошнойс двумя канавкамивыступвставканачалонаследовать
● Атрибут Outline-style используется для стилизации всего контура элемента. Стиль не может быть отсутствующим, иначе контур не появится.
●Примечание. Всегда объявляйте атрибут стиля контура перед атрибутом цвета контура. Цвет контура элемента можно изменить только после того, как он получил свой контур.
●Контурные линии не занимают места и не обязательно имеют прямоугольную форму.
● Синтаксис JavaScript.
object.style.outlineStyle=пунктирный
(4) ширина контура: установите ширину контура;
тонкийсреднийтолстыйдлинанаследовать
●Примечание. Всегда объявляйте атрибут стиля контура перед атрибутом ширины контура. Цвет контура элемента можно изменить только после того, как он получил свой контур.
●Ширина не может быть отрицательным числом.
● Синтаксис JavaScript.
object.style.outlineWidth=тонкий
(5) Смещение контура: установите расстояние между контуром и границей.
Пример:
<!DOCTYPEhtml><html><head><styletype=text/css>p{text-align:center;border:redsolidthin;outline:#00ff00dottedthick;</style></head><body><p>Dotcpp Приглашаем всех желающих изучить программирование</p></body></html>Результаты запуска:
