Html рамка вокруг формы

Рамки и границы

С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого — создание тени. Далее рассмотрим эти методы и их различия между собой.

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

• outline выводится вокруг элемента ( border внутри);
• outline не влияет на размеры элемента ( border добавляется к ширине и высоте элемента);
• outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах ( border можно использовать для любой стороны или всех сразу);
• на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Возникает вопрос — в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

• создание сложных разноцветных рамок;
• добавление рамки к элементу при наведении на него курсора мыши;
• сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
• для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания различных дизайнерских эффектов.

Разноцветные рамки

Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.

В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1).

Рис. 1. Рамка вокруг элемента

Рамка при использовании :hover

При добавлении рамки через border происходит увеличение ширины элемента, что довольно заметно при сочетании border и псевдокласса :hover . Есть два способа, как это «победить». Самое простое — заменить border на outline , которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2).

Пример 2. Рамка при наведении

outline не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод — добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width , border слева и border справа. Аналогично обстоит и с высотой.

Пример 3. Рамка при наведении

Рамка вокруг полей формы

В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline значение none , как показано в примере 4.

Рамки через box-shadow

Хотя свойство box-shadow предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border или outline . Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую.

Чтобы получить рамку, первые три параметра следует задать нулевыми, они отвечают за положение тени и её размытие. Четвёртый параметр в данном случае отвечает за толщину границы, а пятый устанавливает цвет рамки. Для второй рамки четвёртый параметр равняется сумме толщин двух рамок.

В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow .

Пример 4. Использование box-shadow

Результат данного примера показан на рис. 3.

Рис. 3. Рамки, созданные свойством box-shadow

Источник

Рамки html свойство border

Рамка — самый популярный и легко создаваемый элемент оформления контента с большим потенциалом преображения дизайна. В этом уроке будем использовать только HTML.

Рамку можно создать для любого html элемента, будь то

, , , , , и так далее.

Разница между рамками блочных и встраиваемых элементов состоит в том, что у блочных рамка образуется на всю ширину блока, но её можно ограничивать.

Рамка же встроенного создаётся непосредственно вокруг элемента, заключённого в тег.

Для создания рамки применяется стилевое свойство border которому задаются три значения по порядку

Так как руководство это практическое, то перейдём непосредственно к примерам.

Для примера возьмём тег

и создадим ему простую рамку толщиной 3 px

Как видите — рамка заняла всё пространство, которое занимает тег.

Так ведёт себя рамка созданная для блочных элементов, таких как

, и т.д.

Чтоб рамка была только вокруг текста, в значение вводится ширина, которую можно задать в любых доступных в веб единицах размеров.

Если задать меньшую ширину, то слова в рамке будут размещаться в несколько строк, то есть автоматически будет увеличиваться высота.

Рамка для встроенных или строчных элементов, таких как , ,

---

и т.п., располагается непосредственно вокруг элемента.

Бла-бла-бла Бла-бла-бла < span style color: #008080;">border:3px #00B344 solid; width:100px; «>текст текст текст текст < /span >Бла-бла-бла Бла-бла-бла

Бла-бла-бла Бла-бла-бла текст текст текст текст Бла-бла-бла Бла-бла-бла

Можно изменить вид рамки, для этого в значении меняется её название.

Для рельефной рамки нужно задавать толщину побольше, иначе она будет смотреться как сплошная.

Для создания неполной рамки в код вместо свойства border вводятся свойства border-top , border-right , border-bottom , border-left , по отдельности или в различных комбинациях, в зависимости от того, какая граница вам нужна.

< p style color: #008080;">border-left:3px #00B344 double; border-bottom:3px #00B344 double; width: 200px; padding: 5px 0 5px 15px; margin:50px 0 50px 150px; » > текст текст текст текст < /p >

Выравнивание и отступы рамки

Текст внутри рамки можно выровнять по центру или правому краю, добавив в код свойство text-align , которое принимает значения

left — выравнивание по левому краю (по умолчанию)

center — выравнивание по центру

right — выравнивание по правому краю

Можно задать для рамки отступы от текста.

Для этого в код рамки вводится свойство padding , которое принимает 4 цифровых значения:

первая цифра — отступ сверху;

вторая цифра — отступ справа;

третья цифра — отступ снизу;

четвёртая цифра — отступ слева.

Отступы задаются в любых доступных в веб единицах размеров.

Если в свойстве padding указать одно значение, то отступы со всех сторон будут одинаковыми.

Если указать два значения, то первая цифра укажет отступы сверху и снизу, а вторая — справа и слева.

Можно задать отступ от предметов находящихся снаружи рамки.

Для этого в код рамки добавляется свойство margin , которое так же как и padding может принимать 4 цифровых значения.

Сделаем отступы слева, сверху и снизу

< p style color: #008080;">border:3px #00B344 ridge; width: 200px; padding: 5px 0 5px 15px; margin:50px 0 50px 150px; » > текст текст текст текст < /p >

Можно внутри рамки сделать фоновый цвет.

Для этого в код рамки вводится свойство background , в значении которого указывается код цвета.

< p style color: #008080;">background: #F4FC03; border:3px #00B344 ridge; width: 200px; padding: 10px 0 10px 15px; margin:20px; » > текст текст текст текст < /p >

Можно вместе с текстом в рамку вставить картинку. В примере .gif картинка.

< p style color: #008080;">background-color: #F4FC03; border:3px #00B344 ridge;
width: 240px; height:100px; padding: 5px 0 5px 15px; margin:20px 0 0 20px ;»>
< img src color: #008080;">images/i6.jpg «>< br >Текст текст текст текст текст < /p >

А если задать ширину рамки ridge пикселей в 15-20, то есть в свойстве border вместо 3px задать 15px, то получится багет.

Так же в дизайне рамки можно использовать стилевые свойства border-radius — закругление и box-shadow — тень.

< p style color: #008080;">border:2px solid #555; border-radius:5px; width: 200px; text-align:center; margin:20px; padding:20px; » > текст текст текст текст < /p >

< p style color: #008080;">border:2px solid #555; box-shadow:3px 3px 5px #999; width: 200px; text-align:center; margin:20px; padding:20px; » > текст текст текст текст < /p >

Как оформляются рамки в CSS и как делается тень, читайте в статьях Рамки CSS и Как сделать тень для блока.

Перемена
\
Вовочка папе: — Папа, а тебя била когда нибудь твоя мама ?
— Нет, только твоя…

Источник

Как создать рамку вокруг элемента. CSS-свойство border

CSS-свойство border используется для задания стиля, толщины и цвета границы элемента. Граница — это линия, которая окружает элемент и отделяет его контент от соседних элементов. С помощью свойства border можно создавать различные рамки — от простых одноцветных линий до сложных узоров и теней.

В общем виде свойство записывается так:

border-width — задаёт толщину границы.

border-style — устанавливает стиль рамки.

border-color — определяет цвет рамки.

Значения свойства border

Border-width

Свойство border-width определяет толщину рамки и может быть задано в пикселях ( px ), процентах ( % ) или описано ключевым словом — thin , medium , thick .

• thin — тонкая граница, обычно около одного пикселя.
• medium — средняя граница, около трёх пикселей.
• thick — толстая граница, примерно пять пикселей.

Border-style

border-style — задаёт стиль границы и может принимать одно из значений — none , hidden , dotted , dashed , solid , double , groove , ridge , inset , outset .

hidden — граница скрыта, но она занимает место.

solid — сплошная линия границы.

groove — объёмная рифлёная вдавленная рамка.

ridge — объёмная рифлёная выпуклая рамка.

inset — объёмная вдавленная рамка.

outset — объёмная выпуклая рамка.

Border-color

border-color — определяет цвет рамки и может быть задан в виде ключевого слова, соответствующего названию цвета, hex-кода, rgb или hls значений. Значение currentColor использует текущий цвет текста в качестве цвета границы.

Наследование

Свойство border не наследуется от родительских элементов. Граница, заданная для одного элемента, не будет применяться к его дочерним элементам.

⭐ Свойство border поддерживается современными браузерами. Актуальная информация — на caniuse.com.

Для чего использовать свойство border

Создание стилизованной границы. Свойство border используется для создания стилизованных кнопок или ссылок с границей, которая меняет свой стиль при наведении курсора или нажатии.

Созданиетенейили выделений. Свойство border можно комбинировать с другими свойствами, такими как box-shadow или outline , для создания различных эффектов теней или выделений.

Разделение разных частей элемента. С помощью свойства border можно разделять различные части элемента, например, заголовок и содержимое блока.

Нюансы

Если нужно задать отдельные значения для каждой стороны границы, рекомендуется использовать отдельные свойства border-top , border-right , border-bottom и border-left .

Для создания рамок с закруглёнными углами используют свойство border-radius .

Чем заменить свойство

Для создания более сложных границ или декоративных элементов можно использовать свойства box-shadow , outline или border-image .

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник