Границы html задаем при помощи свойства border. Border задает границы элемента (рамочки, блока). Он может принимать следующие значения:
- по ширине (border-width) - thin (тонкая), medium (средняя), thick (толстая).
- по типу (border-style)
- none - запрет рисования границы;
- dotted - граница точками;
- dashed - граница штрихами;
- solid - сплошной линией;
- double - двойной линией;
- groove - трехмерная вдавленная;
- ridge - трехмерная выпуклая;
- inset - трехмерная ступенька вверх;
- outset - трехмерная ступенька вниз.
- border-color определяет цвет рамки. Может принимать значение transparent, что означает невидимую рамку.
- border-top, border-bottom, border-left, border-right - задают расположение рамки.
Формула, которой необходимо воспользоваться для того, чтобы задать границу:
<# style="border-значения;border-width:значения:border-style:значения;border-color:значения"></#>,
где вместо слов "значения" подставляем параметры, задающие расположение, ширину, стиль и цвет рамки. они могут располагаться в произвольном порядке.
Вместо "#" подставляем атрибуты table, blockquote, span, fieldset, img, div или др.
Код: <div style="border-top;border-width:thin;border-style:dotted ;color:blue">
рамка штрихами с тегом div растягивается во всю ширину экрана</div>
обвести текст можно при помощи тега Span
Код:<span style="border-bottom;border-width:medium;border-style:dashed;border-color:red;">обвести текст можно при помощи тега Span</span>
С помощью тега fieldset и задания трехмерной вдавленной рамки получаем следующий вид
Код: <fieldset style="border-top;border-width:thick;border-style:groove;border-color:green">С помощью тега fieldset и задания трехмерной вдавленной рамки получаем следующий вид</fieldset>
Таким образом, можете и далее поэкспериментировать с различными рамочками.
И последнее: расскажу о том, как сделать рамочку с разноцветными сторонами. Пример:
ВАШ ТЕКСТ |
Вот её код:
<table style="border-style: solid; border-width: thick; border-top-color: blue;
border-right-color: red; border-bottom-color: green; border-left-color: Yellow;"><tr> <td>ВАШ ТЕКСТ</td> </tr>
</table>, где
- border-top-color верхняя граница,
- border-right-color правая,
- border-bottom-color нижняя,
- border-left-color левая.