圓角裁剪

Question

我遇到了四捨五入的問題，他們一直想在左側裁剪幾個像素。以下是我正在使用的代碼。我試過增加數字和減少數字;我已經添加了一個包裝器;我已經嘗試了所有可以用於搜索的不同解決方案，但它仍然收穫頗豐。任何人都可以給我一隻手，因爲我似乎不太方便？顯然，我無法發佈它看起來像的圖片。

<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

我有同樣的問題，當border-radius規範出來了。原來，您必須將border-radius添加到<img>標記。然後你可以保留或刪除<div>的border-radius屬性。

Answer 2

本質上你需要處理嵌套的圓角，這是相當有用的發電機與這個有用的工具。

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

Answer 3

你可以試試這個：

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

我已經能夠使用下面的CSS來解決這個問題。這在我的網站上工作，我希望它可以幫助你解決你的問題。不知道這是否是你失蹤的論點。

.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; 

}