Выделение со скругленными углами

We use cookies. Read the Privacy and Cookie Policy

Выделение со скругленными углами

Сказавший "а" да скажет "б"! Позволивший создавать рамки со скругленными углами да позволит скруглять углы у выделения!

Расширение CSS — moz-outline-radius-topleft задает радиус скругления верхнего левого угла выделения:

— moz-outline-radius-topleft: <значение>

Радиус скругления может быть задан в любой единице измерения, поддерживаемой CSS.

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

- moz-outline-radius-topright — радиус скругления верхнего правого угла выделения.

- moz-outline-radius-bottomright — радиус скругления нижнего правого угла выделения.

- moz-outline-radius-bottomleft — радиус скругления нижнего левого угла выделения.

Формат их использования такой же, как у расширений CSS, описанных в начале этого раздела.

Листинг П3 иллюстрирует пример.

Листинг П3

DFN { outline: thin dotted #B1BEC6;

— moz-outline-radius-topleft: 3px;

— moz-outline-radius-topright: 3px;

— moz-outline-radius-bottomright: 3px;

— moz-outline-radius-bottomleft: 3px }

Здесь мы задаем для всех фрагментов текста, помеченных тегом <DFN>, выделение, все углы которого имеют радиус скругления 3 пиксела.

Расширение CSS — moz-outline-radius позволяет задать радиусы скругления сразу для всех углов выделения:

— moz-outline-radius: <значение 1> [<значение 2> [<значение 3>[<значение 4>]]]|inherit

Здесь можно указать от одного до четырех значений.

— Если указано одно значение, оно задаст радиус скругления всех углов выделения.

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

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

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

Эти расширения CSS поддерживаются только Firefox и не включены в стандарт CSS 3.

Пример:

DFN { outline: thin dotted #B1BEC6;

— moz-outline-radius: 3px }

Данный текст является ознакомительным фрагментом.