Saltar al contenido principal
Codigo Heroe
Desafío anterior
Радиальные градиенты. Вводная глава 19/14
Ver desafíos del nivel
  1. 1. Функция radial-gradient()
  2. 2. radial-gradient() как значение
  3. 3. radial-gradient() как CSS-изображение
  4. 4. <color-stop-list>: цвета
  5. 5. <color-stop-list>: несколько цветов
  6. 6. Color stop: позиция
  7. 7. Color stops: позиции
  8. 8. Центр: <position> keywords
  9. 9. Центр: keyword position
  10. 10. Центр: <position> px
  11. 11. Центр: pixel position
  12. 12. Центр: <position> %
  13. 13. Центр: <position> % + px
  14. 14. Центр: <position> px + %
Siguiente desafío
  • Skill Atlas

Cargando…
Estará listo en unos segundos.

  • Desafío

Центр: keyword position

Replica el ejemplo modificando el código
DificultadMedia
CategoríaHTML/CSS
Ahora
Estado actual de la página
Ejemplo
Resultado que debes obtener
ResultadoAparecerá después de la primera comprobaciónAparecerá después
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Центр: keyword position</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="local-9.css"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="scene"><div class="coupon"></div></main> </body> </html>
CSS
.coupon { background-image: radial-gradient( at top right, #eff6ff 16%, #bfdbfe 46%, #1d4ed8 82% ); } /* Измените только позицию центра внутри radial-gradient(), чтобы получилось как в образце. Возможные позиции: left center, center bottom, top left, right bottom */
Vista previa

El código cambió. Haz clic en «Actualizar» o activa la ejecución automática.

Saliste de la página del desafío.

Haz clic dentro de la vista previa para enfocar esta ventana.

100%
0
    Completado 0%.
    Codigo Heroe

    © 2023-2026, codigoheroe.com