html - 溢出 :hidden property not working Jquery vertical slider on iphone, ipad

Question

我必须制作一个灯泡形状(即使是椭圆也可以)垂直 slider 的原型(prototype)。问题是，当我拖动 slider 时，它会以矩形方式增长，因此在 iphone 和 ipad 上不会呈椭圆形(因为它是父元素)。我已经能够添加触摸手势，但属性 overflow:hidden 似乎无法正常工作。

Answer 1

给你的 slider 容器 border-radius，然后添加 overflow: hidden。它适用于 iOS 和 Android:

.container {
width: 100%; /* Your slider width, percent or pixels... */
height: 100%; /* Your slider height*/
border-radius: 100%; /* Circle or ellipse, depends of parent element */
overflow: hidden; /* Crop content to border */
background: yellow; /* Irrelevant */
position: relative; /* Takes control of inner elements, could be irrelevant too */
}

其中的所有内容都将被裁剪到边框。