Рисованная рамка
С помощью приложенной картинки рамки сделайте масштабируемый по ширине блок с рисованной границей, как показано на рисунке ниже.
рамки и границы
Вырезанные уголки
Добавьте к блоку небольшие квадратные вырезы по углам, как это показано на рисунке ниже. Код должен корректно работать в IE8+ и современных браузерах.
Шито белыми нитками
В CSS для создания различных рамок или линий на какой-либо стороне элемента применяется свойство border. Оно достаточно универсально, имеет разные стили линий, которым просто задать нужную толщину и цвет. Через формат rgba можно установить и полупрозрачные линии. Однако, таким линиям напрямую нельзя задать желаемое расстояние от края элемента, чтобы получить дизайнерские эффекты вроде показанного на рис. 1.
Двойная рамка
Сделайте рамку вокруг блока, как показано на рис. 1. Рамка должна корректно отображаться во всех современных браузерах.
Рис. 1. Двойная рамка вокруг блока
Гламурная кнопка
Сделайте кнопку как на рисунке, используя только CSS.
Декоративные рамки
Рисованные декоративные рамки делаются с помощью изображений, при этом предварительно рамку разбивают на ряд фрагментов, а затем выводят их в виде фонового рисунка. Этот процесс можно сильно упростить, если воспользоваться свойством border-image, с его помощью легко управлять видом и настройками декоративной рамки.
Рамка вокруг текста
Придумайте пять способов создания рамки вокруг абзаца произвольного текста (тега <p>). Изменять и модифицировать код HTML нельзя, все изменения делаются только через стили. Кроссбраузерность можно не учитывать.
Последняя линия справа
Придумайте три способа, как убрать последнюю линию справа от ссылки. При этом допускается только редактировать стили без изменения HTML-кода внутри <body>.
Рис. 1. Ссылки с линией справа
Эскиз
Сделайте блок, показанный на рис. 1.
Рис. 1
Как добавить линию возле текста?
Можно по-разному привлечь внимание читателя к тексту. Например, сделать текст жирного начертания, изменить его цвет, использовать фон, нарисовать рамку. Но что если требуется не просто выделить текст, сколько отделить один текстовый блок от другого, разделить их на разные смысловые части? Вот тут использование линий и отступов просто неоценимо.
Текст в рамке
С помощью стилей создайте текст в рамке, как показано на рис. 1.
Рис. 1
Как сделать рамку со скругленными уголками?
Для создания рамки вокруг блока используется стилевое свойство border, в качестве значения которого задается толщина, стиль и цвет линии. Если поверх такой линии наложить графические уголки, то мы убьем двух зайцев — получим нужные закругления и сохраним границу, которую можно увидеть даже при отключении картинок.
Как сделать, чтобы текстовое поле при получении фокуса меняло цвет рамки?
Рамка вокруг текстового поля создается с помощью стилевого свойства border, которое добавляется к селектору INPUT. Фокусом же называется активность элемента, в данном случае, когда курсор находится внутри текстового поля и пользователь может вводить символы с клавиатуры.
Поле для игры в гомоку
Создайте таблицу, представленную на рис. 1. Постарайтесь не вводить дополнительные классы для ячеек.
Рис. 1. Поле для игры в гомоку
Как добавить вокруг текста рамку определенного цвета?
Для создания рамки вокруг текста используйте стилевое свойство border, добавляя его к соответствующему селектору. Например, если для текста применяется тег <p>, то для него надо установить следующий стиль.