2010-08-23

Границы при помощи border

Атрибут border задает границы элемента (рамочки, блока). Он может принимать следующие значения:
  1. по ширине (border-width) - thin (тонкая), medium (средняя), thick (толстая).
  2. по типу (border-style)
    • none - запрет рисования границы;
    • dotted - граница точками;
    • dashed - граница штрихами;
    • solid - сплошной линией;
    • double - двойной линией;
    • groove - трехмерная вдавленная;
    • ridge - трехмерная выпуклая;
    • inset - трехмерная ступенька вверх;
    • outset - трехмерная ступенька вниз.
  3. border-color определяет цвет рамки. Может принимать значение transparent, что означает невидимую рамку.
  4. border-top, border-bottom, border-left, border-right - задают расположение границы.
.. Формула, которой необходимо воспользоваться для того, чтобы задать границу:
<# style="border-значения;border-width:значения:border-style:значения;border-color:значения"></#>,где вместо слов "значения" подставляем параметры, задающие расположение, ширину, стиль и цвет рамки. они могут располагаться в произвольном порядке.
Вместо "#" подставляем атрибуты table, blockquote, span, fieldset, img, div или др.
рамка штрихами с тегом div растягивается во всю ширину экрана

Код:

обвести текст можно при помощи тега Span

Код:

С помощью тега 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 левая граница

1 комментарий :

Анна комментирует...

Всё понятно, прекрасные примеры. Спасибо автору!

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности