[SOLUCIONADO] Problema imagen más border-radius

[adrian_hm13]

Buenas a todos, he intentado aplicarle a un .png las propiedades de border-radius con el shadow etc, pero a la hora de aplicarselo, ésta desaparece, cuando quito las propiedades de radius y shadow, aparece de nuevo.

Dejo el CSS:

Código CSS:

.cajaleft {
    width:175px;
    height:300px;
    float:left;
    background:url(../images/foto.png)
-moz-border-radius: 25px 0px 0px 25px;
-webkit-border-radius: 25px 0px 0px 25px;
border-radius: 25px 0px 0px 25px;
-moz-box-shadow: 0px 0px 30px #1a3038;
-webkit-box-shadow: 0px 0px 30px #1a3038;
box-shadow: 0px 0px 30px #1a3038;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8')";
background-image: -moz-linear-gradient(left, #d4d4d4, #e8e8e8);
background-image: -ms-linear-gradient(left, #d4d4d4, #e8e8e8);
background-image: -o-linear-gradient(left, #d4d4d4, #e8e8e8);
background-image: -webkit-gradient(linear, left top, right top, from(#d4d4d4), to(#e8e8e8));
background-image: -webkit-linear-gradient(left, #d4d4d4, #e8e8e8);
background-image: linear-gradient(left, #d4d4d4, #e8e8e8);
}
 

[Crazylegs]

Arriba pones de fondo la imagen, y luego abajo pones de fondo un gradiente, sobrescribiendo la imagen.

Prueba así:

Código CSS:

.cajaleft {
    width:175px;
    height:300px;
    float:left;
-moz-border-radius: 25px 0px 0px 25px;
-webkit-border-radius: 25px 0px 0px 25px;
border-radius: 25px 0px 0px 25px;
-moz-box-shadow: 0px 0px 30px #1a3038;
-webkit-box-shadow: 0px 0px 30px #1a3038;
box-shadow: 0px 0px 30px #1a3038;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8')";
background: url(../images/foto.png) -moz-linear-gradient(left, #d4d4d4, #e8e8e8);
background: url(../images/foto.png) -ms-linear-gradient(left, #d4d4d4, #e8e8e8);
background: url(../images/foto.png) -o-linear-gradient(left, #d4d4d4, #e8e8e8);
background: url(../images/foto.png) -webkit-gradient(linear, left top, right top, from(#d4d4d4), to(#e8e8e8));
background: url(../images/foto.png) -webkit-linear-gradient(left, #d4d4d4, #e8e8e8);
background: url(../images/foto.png) linear-gradient(left, #d4d4d4, #e8e8e8);
}
 

[adrian_hm13]

Iniciado por Crazylegs

Arriba pones de fondo la imagen, y luego abajo pones de fondo un gradiente, sobrescribiendo la imagen.

Prueba así:

Código CSS:

.cajaleft {
    width:175px;
    height:300px;
    float:left;
-moz-border-radius: 25px 0px 0px 25px;
-webkit-border-radius: 25px 0px 0px 25px;
border-radius: 25px 0px 0px 25px;
-moz-box-shadow: 0px 0px 30px #1a3038;
-webkit-box-shadow: 0px 0px 30px #1a3038;
box-shadow: 0px 0px 30px #1a3038;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8')";
background: url(../images/foto.png) -moz-linear-gradient(left, #d4d4d4, #e8e8e8);
background: url(../images/foto.png) -ms-linear-gradient(left, #d4d4d4, #e8e8e8);
background: url(../images/foto.png) -o-linear-gradient(left, #d4d4d4, #e8e8e8);
background: url(../images/foto.png) -webkit-gradient(linear, left top, right top, from(#d4d4d4), to(#e8e8e8));
background: url(../images/foto.png) -webkit-linear-gradient(left, #d4d4d4, #e8e8e8);
background: url(../images/foto.png) linear-gradient(left, #d4d4d4, #e8e8e8);
}
 

Muchas gracias por contestar, pero sigue sin funcionar, alguna idea? xD

[adrian_hm13]

Solucionado:

Código CSS:

.cajaright {
    width:175px;
    height:300px;
    float:right;
    background:url(../images/foto.jpg);
-moz-border-radius: 0px 25px 99px 0px;
-webkit-border-radius: 0px 25px 99px 0px;
border-radius: 0px 25px 99px 0px;
-moz-box-shadow: 0px 0px 30px #1a3038;
-webkit-box-shadow: 0px 0px 30px #1a3038;
box-shadow: 0px 0px 13px #000000;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = '#d4d4d4', endColorstr = '#e8e8e8')";
 
 
 
 
}