溢出：通过边框半径和CSS转换被隐藏（仅适用于webkit）
我想在圆圈内有一个正方形的图像。
当用户将鼠标悬停在图像上时，图像应缩放（放大）。
圆应保持相同大小。
仅在CSS过渡期间，方形图像才与圆形重叠（好像overflow：hidden根本不存在）。
这是一个在Chrome和Safari中具有怪异行为的演示：http :
//codepen.io/jshawl/full/flbau
在Firefox中正常工作。
问题答案：
我删除了一些多余的标记（圆形和方形容器……只需要一个）并设置了img本身的样式：
#wrapper {
width: 500px;
height: 500px;
border-radius: 50%;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}
#test {
width: 100%;
height: 100%;
transition: all 2s linear;
}
#test:hover {
transform: scale(1.2);
}
<div id="wrapper">
<img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA1LzA4L2JlL2JhYmllc193aXRoLjA5NGNjLnBuZwpwCXRodW1iCTg1MHg1OTA-CmUJanBn/8f195417/e44/babies_with_swagg.jpg" id="test">
</div>
-
问题内容： 我正在尝试使用CSS创建一个圆， …只有一个div： 并仅使用CSS定义。不允许使用SVG，WebGL，DirectX等。 我尝试绘制一个完整的圆，然后将另一个圆与另一个圆淡化div，它确实起作用，但是我正在寻找一种更优雅的选择。 问题答案： 您可以使用border-top-left-radius和border-top-right- radius属性根据框的高度（和添加的边框）在框上四
-
问题内容： 这是我的 owl/动画的JSFIDDLE，没有任何清楚显示的问题 。据我了解，这是由引起的， 可能是由于引起的。 drop-shadows border-radius overflow: hidden; owl不是这个问题的意思，只是我所遇到的类似情况的一个示例。jsfiddle / cat是这个问题的意思，对不起， 混淆！ 这是我的猫的JSFIDDLE，具有使用blura属性的插入框
-
问题内容： 我有以下在Firefox，Chrome和Safari中可用的工具。但不是在IE9中。它在td的左上和右上应用圆角。我想念什么？ 问题答案： 您是否已将其放在HTML文档的顶部（在标记上方） IE9要求此网站显示新的HTML5 / CSS3内容 编辑：或许多其他Doctype（XHTML等，但这是最短和最容易记住的）
-
问题内容： 使用CSS3属性，我发现了一个有趣的问题。我想对图片做一些缩放效果。但是当我使用父div 和时，子div扩展了父div的范围。 更新： 问题没有解决。如果我添加，仍然无法正常工作。我试图解决此问题，但没有成功。 问题答案： 这是基于Webkit的浏览器中的已知错误-。您可以在课程中添加来解决此问题。 对于更新的需求，请使用，向元素添加过渡，这是另一个已知的Chomre / Webkit
-
问题内容： 我一直在努力奋斗。我想绝对定位将在div中移动的图像，并希望剪切超出div的任何内容。这是问题的示例： 因此，我希望徽标的右边缘不显示。有想法吗？ 问题答案： 由于图像的容器是绝对放置的，因此它不在“包含” div的范围之内。 您的选择是使用jQuery动态定位相对位置或调整绝对定位div的尺寸。
-
问题内容： 我在w3schools上阅读了以下代码，但不了解该属性如何影响文本是否显示在右侧。 我知道它用于处理超出范围的内容，但不了解它在这种情况下如何应用。 问题答案： 我尽力消除混乱： 是一个块级元素，与元素一样（它们延伸到父宽度的100％）。这就是为什么默认情况下，如果在这些元素上未声明宽度或显示，它将显示在if 下方的原因。 现在在您的示例中，仅包含浮动元素。这使其折叠到一个高度（尽管如