Практическое занятие 12

Задание

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


Напишем код

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Границы в CSS</title>
    <style>
        p {text-align: center}
    </style>
</head>
<body>
    <p>
    <img src="hummingbird-2139279_640.jpg" style="width: 500px; border: 15px solid #5fc1c0; border-radius: 50%">
    </p>
    <p>
    <img src="tree-576847_640.png" style="width: 500px; border: 50px solid; border-image-source: url(frame-4822807_640.png); border-image-slice: 200;">
    </p>
    <div style="width: 400px; height: 400px; margin: 50px auto;
    background: #F5F240;
    border: 10px dotted #F0D900;     
    border-radius: 20px 300px 60px 300px;"></div>
</body>
</html>

Скопируйте код в редактор и поэкспериментируйте со значениями стилей.

Последнее изменение: Четверг, 29 октября 2020, 19:14