html - 圆 Angular 裁剪

标签 html css rounded-corners

我遇到圆 Angular 问题,他们一直想在左侧裁剪几个像素。下面是我正在使用的代码。我试过增加数字和减少数字;我添加了一个包装器;我已经尝试了所有可以找到的用于搜索的不同解决方案,但它仍然会失败。任何人都可以帮我一把,因为我似乎不太灵巧?显然我也无法发布它的外观图片。

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

最佳答案

我在 border-radius 时遇到了同样的问题规范出来了。结果你必须添加 border-radius<img>标签。然后您可以保留或删除 <div>border-radius属性(property)。

关于html - 圆 Angular 裁剪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13644966/

相关文章:

javascript - 在 CSS 动画中进行意外移动

swift - Xcode 6 中圆角矩形的问题

internet-explorer - IE 圆 Angular

javascript - 如何在javascript中对字符串中的反斜杠进行全局替换

javascript - 粘贴后 IE9 输入 setSelectionRange() 无效

html - 我怎样才能解决这个问题?一个元素上的两个动画?

纯 CSS 布局解决方案(flexbox?)

html - 灵活的圆 Angular 框,带阴影,使用图像

javascript - 如何使用 javascript 在 html 中定位 id 或类?

html - 如何在 Windows 10 中使用 Telnet 连接到网站?