angoli arrotondati ritaglio

Question

Ho problemi con gli angoli di arrotondamento, continuano a ritagliare sul lato sinistro di alcuni pixel. Di seguito è riportato il codice che sto usando. Ho provato ad aumentare numeri e numeri decrescenti; Ho aggiunto un wrapper; Ho provato tutte le diverse soluzioni che posso trovare per la ricerca, ma continua a decadere. Qualcuno può darmi una mano dal momento che non mi sembra molto utile? E a quanto pare non posso pubblicare una foto di come sembra.

<style> 
.image 
{ 
    width: 200px; 
    position:relative; 
    -webkit-border-radius: 14px; 
    -moz-border-radius: 14px; 
    -khtml-border-radius: 14px; 
    border-radius: 14px; 
    overflow: hidden; 
} 

#slideshow 
{ 
    margin:0 0 0 0; 
    position:relative; 
    width:200px; 
    height:133px; 
    padding: 10px; 
    overflow:hidden; 
    -webkit-border-radius: 14px; 
    -moz-border-radius: 14px; 
    -khtml-border-radius: 14px; 
    border-radius: 14px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.3); 
} 

#slideshow > div 
{ 
    position:absolute; 
} 
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 

<script> 
$(function() { 
    $("#slideshow > div:gt(0)").hide(); 
    setInterval(function() 
    { 
     $('#slideshow > div:first') 
      .fadeOut(2000) 
      .next() 
      .fadeIn(2000) 
      .end() 
      .appendTo('#slideshow'); 
    }, 3000); 
}); 
</script> 


<div id="slideshow"> 
    <div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div> 
    <div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div> 
    <div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div> 
</div> 

Answer 1

ho avuto lo stesso problema quando la specifica border-radius è venuto fuori. Risulta che è necessario aggiungere border-radius al tag <img>. Quindi è possibile mantenere o rimuovere la proprietà border-radius .

Answer 2

In sostanza è necessario avere a che fare con gli angoli arrotondati nidificati che sono abbastanza generosamente utili con questo utile strumento.

http://joshnh.com/tools/get-your-nested-border-radii-right.html

Answer 3

si può provare questo:

div.circle 
{ 
    width: 10px; 
    height: 10px; 
    background: white; 
    border-radius: 28px; 
    -moz-border-radius: 64px; 
    -webkit-border-radius: 64px; padding:32px; 
    border: 2px black; 
    color:white; 
    text-align:center; 
    -webkit-box-shadow: 0 0 1px rgb(255,0,0); 
    -moz-box-shadow: 0 0 1px rgb(255,0,0); box-shadow: 0 0 1px rgb(255,0,0); 
} 

Answer 4

sono stato in grado di risolvere questo problema utilizzando il seguente CSS. Questo ha funzionato sui miei siti, spero che possa aiutarti con il tuo problema. Non sono sicuro che sia un argomento che ti manca o no.

.classname { 
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff; 
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; 
box-shadow:inset 0px 1px 0px 0px #ffffff; 
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); 
background:-moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%); 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); 
background-color:#ededed; 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
border-radius:6px; 
border:1px solid #dcdcdc; 
display:inline-block; 
color:#777777; 
font-family:arial; 
font-size:15px; 
font-weight:bold; 
padding:6px 24px; 
text-decoration:none; 
text-shadow:1px 1px 0px #ffffff; 

}