_1.jpg)
Tweet Здравствуйте уважаемые читатели с вами снова я постоянный ведущий блога «Профессия веб-мастер» Тригуба Сергей. (Здесь следуют аплодисменты. Шутка ) Ну а теперь к делу. Давненько я уже не продолжал сериал о новых свойствах CSS3. Пора исправить эту оплошность. Для тех, кто только, что к нам присоединился. Мы уже рассмотрели: прозрачность css, border-radius, text-shadow, box-shadow Сегодня очередь свойства под названием: outline Дословно его можно перевести как «за линией». Ничего непонятно? Ничего сейчас посмотрите, что оно делает, и сразу все поймете.
Синтаксис outline
| 1 | outline: 2px solid #FF0000 |
Для реализации примера возьмем синий квадрат: Html
| 1 | =”kvblue”>> |
Стили
| 1 2 3 4 5 | .kvblue{ background:blue; height:100px; width:100px; } |
Результат: А теперь применим наше свойство outline Html
| 1 | =”kvblue”>> |
Стили
| 1 2 3 4 5 6 | .kvblue{ background:blue; height:100px; width:100px; outline: 2px solid #FF0000; } |
Результат: Внимательные заметят, что свойство outline копирует функциональность свойства «border». В принципе оно так и есть, но есть отличия.
Outline и Border сходства и расхождения
Сходства:
- Оба устанавливают границу со всех четырех сторон; Принимают одни и те же параметры;
Расхождения:
- Outline – не может задавать границу для выбранных сторон, только для всех; Outline – не влияет на ширину и положение элемента на странице; (посмотрим на пример)
Для того, что бы увидеть отличия, нам нужен помощник зеленый квадрат: Html
| 1 2 | =”kvblue”>> =”kvgreen”>> |
Стили
| 1 2 3 4 5 6 7 8 9 10 | .kvblue{ background:blue; height:100px; width:100px; } .kvgreen{ background:green; height:100px; width:100px; } |
Результат: Теперь применим border: 5px solid #FF0000 Html
| 1 2 | =”kvblue”>> =”kvgreen”>> |
Стили
| 1 2 3 4 5 6 7 8 9 10 11 | .kvblue{ background:blue; height:100px; width:100px; border: 5px solid #FF0000 } .kvgreen{ background:green; height:100px; width:100px; } |
Результат: Меняем border на outline Html
| 1 2 | =”kvblue”>> =”kvgreen”>> |
Стили
| 1 2 3 4 5 6 7 8 9 10 11 | .kvblue{ background:blue; height:100px; width:100px; outline: 5px solid #FF0000 } .kvgreen{ background:green; height:100px; width:100px; } |
Результат: Видно разницу? В отличие от рамки border рамка outline не сдвигает рядом стоящие объекты и не смешает объект, к которому применено свойство.
Рамка outline как будто имеет position absolute, то есть просто ложиться поверх нашего квадрата, не зацепая его. Вот такое удобное свойство и очень простое в обращении. На этом все. Удачи!!! С уважением Тригуба Сергей. Интересное — сотрудник дпс играет в cs blah Спасибо Вам, что добавили эту статью в: Добавить в Twitter Добавить в Вконтакт Добавить в Facebook Добавить в Google buzz Добавить в Мой мир Опубликовать в своем блоге livejournal. com Приглашаю присоединиться ко мне в следующих сервисах: Присоединится ко мне в twitter Присоединится ко мне в Вконктакте Присоединится ко мне в Facebook Присоединится ко мне в Google buzz Присоединится ко мне в friendfeed Мои групы: Группа webmasterprof. ru в Facebook Группа webmasterprof. ru в Вконтакте Будь в курсе! Подпишись на обновления блога через: RSS RSS Email Email