He hecho todo lo posible para resolver el problema, pero no funciona. Quiero hacer un borde degradado en mi sitio web para una presentación de diapositivas. Utilicé (antes) pseudo selector aquí está mi código html: -

* {
  color: white;
  margin: 0px 0px;
  padding: 0px 0px;
  box-sizing: border-box;
}

body {
  background-color: #060c21;
}


/* NavBar Starts */

#mainnav {
  display: flex;
  justify-content: center;
  padding: 15px;
  background-color: black;
  width: 98%;
  position: static;
}

.items>a {
  font-family: "Roboto Slab", serif;
  text-decoration: none;
}

.items {
  margin: 0 5vw 0 5vw;
  padding: 1vw;
  width: fit-content;
  font-size: 1.3rem;
}

.items>a:hover {
  color: rgb(0, 255, 242);
}


/* NavBar Ends */


/* Content Starts */

.slide-box {
  position: relative;
  border: 2px solid red;
  height: 75vh;
  width: 95%;
  margin: 2% auto;
}

.slide-box:before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: white;
  z-index: -1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Practice</title>

  <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@531&display=swap" rel="stylesheet" />
  <!-- font-family: 'Roboto Slab', serif; -->
  <link rel="stylesheet" href="Vaishnavi.css" />
</head>

<body>
  <nav>
    <div id="mainnav">
      <div class="items">
        <a href="Vaishnavi.html">Home</a>
      </div>

      <div class="items">
        <a href="">About US</a>
      </div>

      <div class="items">
        <a href="">Creations</a>
      </div>

      <div class="items">
        <a href="">Help</a>
      </div>
    </div>
  </nav>
  <div class="slide-box">
    <h1>This is glowing box</h1>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo voluptatibus et quasi illum inventore rem excepturi quam tenetur eius est, minima aliquam repellendus deleniti modi laudantium similique iste ipsum? Ad!
    </p>
  </div>
</body>

</html>

Por favor, dime el error que estoy cometiendo y por qué mi índice z no funciona correctamente. en mi opinión, he escrito el código correctamente

1
Krishna Noutiyal 24 jun. 2020 a las 08:01

2 respuestas

¿Es esto algo que estás buscando?

Puede ver que usé border-image (ref) para crear un borde degradado.

* {
  color: white;
  margin: 0px 0px;
  padding: 0px 0px;
  box-sizing: border-box;
}
body {
  background-color: #060c21;
}

/* NavBar Starts */
#mainnav {
  display:flex;
  justify-content: center;
  padding: 15px;
  background-color: black;
  width: 98%;
  position: static;
}

.items > a {
  font-family: "Roboto Slab", serif;
  text-decoration: none;
}
.items {
  margin: 0 5vw 0 5vw;
  padding: 1vw;
  width: fit-content;
  font-size: 1.3rem;
}

.items > a:hover {
  color: rgb(0, 255, 242);
}

/* NavBar Ends */

/* Content Starts */
.slide-box{
  position: relative;
  border: 5px solid red;
  height: 75vh;
  width: 95%;
  margin: 2% auto;
  border-image: linear-gradient(to right, red , yellow);
  border-image-slice: 1;

}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Practice</title>

    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@531&display=swap"
      rel="stylesheet"
    />
    <!-- font-family: 'Roboto Slab', serif; -->
    <link rel="stylesheet" href="Vaishnavi.css" />
  </head>
  <body>
    <nav>
      <div id="mainnav">
        <div class="items">
          <a href="Vaishnavi.html">Home</a>
        </div>

        <div class="items">
          <a href="">About US</a>
        </div>

        <div class="items">
          <a href="">Creations</a>
        </div>

        <div class="items">
          <a href="">Help</a>
        </div>
      </div>
    </nav>
    <div class="slide-box">
      <h1>This is glowing box</h1>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo
        voluptatibus et quasi illum inventore rem excepturi quam tenetur eius
        est, minima aliquam repellendus deleniti modi laudantium similique iste
        ipsum? Ad!
      </p>
    </div>
  </body>
</html>
0
Jakub A Suplicki 24 jun. 2020 a las 05:22

Aquí está el código de cómo puedes lograr un borde degradado (el código se copia de los trucos css). Para obtener más información, visite aquí

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #222;
}

.module-border-wrap {
  max-width: 250px;
  padding: 1rem;
  position: relative;
  background: linear-gradient(to right, red, purple);
  padding: 3px;
}

.module {
  background: #222;
  color: white;
  padding: 2rem;
}
<div class="module-border-wrap">
  <div class="module">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
  </div>
  
</div>
0
Robin 24 jun. 2020 a las 08:39