Как закруглить углы у картинки в html | Уроки HTML, CSS

Картинки, которые вы выкладываете в интернет, можно хорошо оформлять, например можно, закруглить у них углы, чтобы сделать более подходящими для вашего дизайна. Вообще можно применять очень много эффектов к вашей картинке: например, их затемнять при наведении мышкой или наоборот делать более светлыми, а можно сделать чтобы они отбрасывали тень или вели себя как кнопка на которую ты нажимаешь – т.е. при наведении мышки на эту картинку, она например вдавливается. На самом деле очень много разных эффектов можно применять. Здесь, в этом видео, мы рассмотрим как закруглить углы у картинок. Сделать это можно следующим образом: 1) Через указание стиля тегу img: [img src=““ alt=““ height=“400px“ style=“border-radius: 30px;“] 2) Через назначение класса тегу img: [img src=““ alt=““ height=“400px“ class=“my_round“] Тогда, сам класс должен быть указан в [head][/head] тегах: [style] .my_round {border-radius: 30px;} [/style] Вот полный пример страницы сайта: [!DOCTYPE html] [html lang=“en“] [head] [meta charset=“UTF-8“] [title]картинка с закругленными углами[/title] [style] .my_round {border-radius: 30px;} [/style] [/head] [body] [img src=““ alt=““ height=“400px“ style=“border-radius: 30px;“] [img src=““ alt=““ height=“400px“ class=“my_round“] [/body] [/html] *** Внимание: Угловые скобки в описании нельзя разместить - поэтому вместо них использованы квадратные [ ] !!! *** #html #картинка #закругление #углы #дизайн #design Подписывайтесь на наш канал в YouTube: Вступайте в нашу группу ВК: Задавайте вопросы – постараюсь ответить 😊 Удачи в таких классных начинаниях!
Back to Top