Question

我正在开发一个项目，该项目利用圆形div放置图像来创建一种镜面效果，您可以在圆形div中拖动图像。

该应用程序的标记如下：

<div id="LookingGlass" class="looking-glass" style="margin:0 auto;">
    <div class="looking-glass-images">
        <img src="/wp-content/uploads/2011/11/CCDS_Ext_008a-copy.jpg" width="1250" height="980" />
        <img src="wp-content/uploads/2011/11/CCDS_Ext_011.jpg" width="967" height="1250" />
        <img src="wp-content/uploads/2011/11/CCDS_Ext_012.jpg" width="1250" height="962" />
        <img src="wp-content/uploads/2011/11/CCDS_Int_005.jpg" width="912" height="1250" />
        <img src="wp-content/uploads/2011/11/CCDS_Int_008.jpg" width="1250" height="833" />
    </div>
    <ul class="looking-glass-nav"></ul>
</div>

jQuery使用数字自动填充导航对象，这些数字淡出当前图像并以点击的方式淡入淡出。

以下是该对象的Sass代码

@mixin border-radius($size)
    border-radius: $size
    -webkit-border-radius: $size
    -moz-border-radius: $size

.looking-glass
    display: block
    height: 100%

    .looking-glass-nav
        li
            display: inline
            padding: 5px

    .looking-glass-images
        overflow: hidden
        display: block
        height: 500px
        width: 500px
        @include border-radius(50%)

        img
            -webkit-user-select: none
            -moz-user-select: none
            user-select: none
        img.active
            display: block
        img.inactive
            display: none

当我对图像施加可拖动效果时，它们被赋予相对位置样式，并且由于某种原因使得包含图像的div不能被圆化。这是Chrome中的错误还是我在这里做错了什么？

Answer 1

愿这可以帮到你编写供应商前缀的正确方法是将nonvendor属性名称放在最后一个位置，如下所示：

-webkit-property: value;
   -moz-property: value;
    -ms-property: value;
     -o-property: value;
        property: value;

当子元素使用相对定位时，将忽略Chrome border-radius

1 个答案: