Problema con el border-image

sleek · #1 (**permalink**) 16/02/2013, 18:03

Saludos, tengo un pequeño problema, estoy intentando aplicar un borde con imagen, es una practica del libro que estoy leyendo, aunque lo escribo, en el navegador no se refleja, he revisado y he escrito todo como dice en el libro y en w3school, no se cual sea el problema.

El código CSS:

Código:

body {
  text-align: center;
}
#principal {
  display: block;
  width: 500px;
  margin: 50px auto;
  padding: 15px;
  text-align: center;
  border: 29px;
  -moz-border-image: url(border.png) 29 stretch;
  -webkit-border-image: url(border.png) 29 stretch;
  -border-image: url(border.png) 29 stretch;
  background: #DDDDDD;


  

  -moz-border-radius: 20px / 10px;
  -webkit-border-radius: 20px / 10px;
  border-radius: 20px / 10px;

  -moz-box-shadow: rgb(150,150,150) 5px 5px;
  -webkit-box-shadow: rgb(150,150,150) 5px 5px;
  box-shadow: rgb(150,150,150) 0px 0px 10px;

  background: -webkit-radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);
  background: -moz-radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);
}
#titulo {
  font: bold 36px FreeSerif, verdana, sans-serif;
  text-shadow: rgba(0,0,0,0.5) 3px 3px 5px;
  color: hsla(120, 100%, 50%, 0.5);
}
@font-face {
  font-family: "FreeSerif";
  src: url("FreeSerif.ttf");
}

Aqui el Código HTML:

Código:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Nuevos Estilos CSS3</title>
  <link rel="stylesheet" href="nuevocss3.css">
</head>
<body>
<header id="principal">
  <span id="titulo">Estilos CSS Web 2.0</span>
</header>
</body>
</html>

La imagen que estoy utilizando es esta:

Le cambié el nombre a "border.png" para trabajar en mi ejercicio.

Espero sus respuestas, gracias de antemano :).

Triby · #2 (**permalink**) 16/02/2013, 23:22

Tal vez no te fijaste que a todos los div aplican lo siguiente:

Código CSS:

Ver originaldiv {
    border:15px solid transparent;
    width:250px;
    padding:10px 20px;
}

Tomando los agregados de borde redondeado y fondo, esto funciona en el editor de w3schools:

Código CSS:

Ver original#round {
border:15px solid transparent;
width:250px;
padding:10px 20px;
 
-moz-border-radius: 20px / 10px;
-webkit-border-radius: 20px / 10px;
border-radius: 20px / 10px;
 
-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
 
-moz-box-shadow: rgb(150,150,150) 5px 5px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px;
box-shadow: rgb(150,150,150) 0px 0px 10px;
 
background: -webkit-radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);
background: -moz-radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);
}

Pruebalo y, si sigue sin funcionar, entonces reivisa la ruta de la imagen.