Градиент, фон, фильтр

Линейный градиент

Линейный градиент
background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);

div {
height: 200px;
background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}

.three {
height: 200px;
background: repeating-linear-gradient(90deg, rgba(255,0,0,0.5),rgba(255,0,0,0.5) 5px, #465298 5px, #465298 20px, rgba(0,0,255,0.5) 20px,rgba(0,0,255,0.5) 25px);
}

.fout {
height: 200px;
background: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px);
}

Задание

Задание

Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.
background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);

Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).

Задание

Фон

Задание
Вставить свой портрет в рамку

Задание
При наведении на картинку снять маску и очки

Рисование
Используя рамки и свойства типа
border-right-color: #2ecc40;
Нарисуйте