контур прямоугольника не подсвечивается градиентом

Question

<!DOCTYPE HTML>


 <html lang="ru"> 

 
  <head>

<title>CSS по видео уроку</title> 


<style> 

* { 

margin: 0; 

padding: 0; 

font-family: verdana; 

} 

body { 

background: #000; 

display: flex; 

justify-content: center; 

align-items: center; 

width: 100vw; 

height: 100vh; 

} 

.gradient { 

width: 400px; 

height: 250px; 

background: linear-gradient(0deg, #000, #262626);  

position: relative; 

border-radius: 5px;

} 

.gradient: before, 

.gradient: after{ 

content: ""; 

position: absolute; 

top: -2px; 

left: -2px; 

background: linear-gradient(45deg, #fb0092, #0000ff, #00ff00, #ffff00, #ff0000, 

#fb0092, #0000ff, #00ff00, #ffff00, #ff0000);

width: calc(100% + 4px); 

height: calc(100% + 4px);  

z-indexs: -1;

border-radius: 5px; 

background-size: 400%;

} 





</style> 






    </head> 
 

<body> 
    

<div class="gradient">

</div> 



   </body>
        


 </html>

Answer 1

Ваш код вполне рабочий. Просто будьте внимательны и не допускайте опечаток и лишних символов.

* {
  margin: 0;
  padding: 0;
  font-family: 'Verdana';
}
body {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.gradient {
  position: relative;
  width: 400px;
  height: 250px;
  border-radius: 5px;
  background: linear-gradient(0deg, #000, #262626);
}
.gradient:before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: -1;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border-radius: 5px;
  background: linear-gradient(45deg, #fb0092, #0000ff, #00ff00, #ffff00, #ff0000, #fb0092, #0000ff, #00ff00, #ffff00, #ff0000);
  background-size: 400%;
}

<div class="gradient"></div>

БЛОГ НА HUSL

контур прямоугольника не подсвечивается градиентом

Ответы (1 шт):