Выделение со скругленными углами
Выделение со скругленными углами
Сказавший "а" да скажет "б"! Позволивший создавать рамки со скругленными углами да позволит скруглять углы у выделения!
Расширение 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 }
Данный текст является ознакомительным фрагментом.