圆角裁剪

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; 

}