Html 边界半径和溢出不为'；当动画添加到不同的元素上时，不受尊重

在CSS3中使用

transform

时，我有一种奇怪的行为

这是我的密码：

*，*：之前，*：之后{
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
}
.btn_交换a{
位置：相对位置；
文字装饰：无；
显示：块；
宽度：150px；
浮动：左；
颜色：#ffffff；
字体大小：14px；
背景：#0ea2d3；
盒影：0 3px0 rgba（7154190,0.75）；
文本对齐：居中；
字体大小：粗体；
}
@关键帧脉冲{
0% {
变换：比例（1）；
}
50% {
转换：标度（1.05）；
}
100% {
变换：比例（1）；
}
}
@-webkit关键帧脉冲{
0% {
变换：比例（1）；
}
50% {
转换：标度（1.05）；
}
100% {
变换：比例（1）；
}
}
a、 abc{
z指数：0；
-webkit动画：脉冲1s线性0s无限交替；
动画：脉冲1s线性无限；
}
#魔盒阿凡达{
位置：相对位置；
保证金：0自动；
-webkit边界半径：62.5px；
-莫兹边界半径：62.5px；
-ms边界半径：62.5px；
-o-边界半径：62.5px；
边界半径：62.5px；
宽度：125px；
高度：125px；
边框：2个实心#ccc；
显示：块；
溢出：隐藏；
}
#阿凡达{
宽度：125px；
高度：125px；
光标：指针；
边界半径：62.5px；
}
#bg_gray{
背景#4c4747；
宽度：100%；
位置：绝对位置；
底部：0；
填充：8px 0 10px 0；
不透明度：0.8；
}
#bg_灰色img{
显示：块；
宽度：20px；
保证金：0自动；
}

我看了一下，看不出它为什么会这样，所以如果跳过img元素，改用背景图像可以吗

如果是这样，下面是一个确实有效的示例

另一种选择是将

background

和

pseudo

组合起来，而不是

img

。这将为您提供更清晰的html结构，并解决您的问题

*，*：之前，*：之后{
框大小：边框框；
}
.btn_交换a{
位置：相对位置；
文字装饰：无；
显示：块；
宽度：150px；
浮动：左；
颜色：#ffffff；
字体大小：14px；
背景：#0ea2d3；
盒影：0 3px0 rgba（7154190,0.75）；
文本对齐：居中；
字体大小：粗体；
}
@关键帧脉冲{
0% {
变换：比例（1）；
}
50% {
转换：标度（1.05）；
}
100% {
变换：比例（1）；
}
}
@-webkit关键帧脉冲{
0% {
变换：比例（1）；
}
50% {
转换：标度（1.05）；
}
100% {
变换：比例（1）；
}
}
a、 abc{
z指数：0；
动画：脉冲1s线性无限；
}
#魔盒阿凡达{
位置：相对位置；
保证金：0自动；
边界半径：62.5px；
宽度：125px；
高度：125px；
边框：2个实心#ccc；
显示：块；
溢出：隐藏；
背景：url(http://i.imgur.com/O29DJOZ.jpg);
光标：指针；
}
#bg_gray{
底部：0；
左：0；
宽度：100%；
高度：30px；
位置：绝对位置；
溢出：隐藏；
光标：自动；
}
#格雷格：以前{
内容：“；
背景#4c4747；
宽度：100%；
高度：125px；
底部：0；
位置：绝对位置；
不透明度：0.8；
边界半径：62.5px；
}
#格雷格：之后{
内容：“；
宽度：100%；
高度：30px；
底部：0；
位置：绝对位置；
背景：url(http://i.imgur.com/m5qIRID.png)中心不重复；
背景尺寸：20px；
}

---

这个问题与以前的问题非常相似。带有摄影机图标的灰色框不包含在圆内（不被圆裁剪）的原因是，浏览器如何创建层并执行加速渲染。你可以在我之前链接的答案中找到更多关于它的信息

解决方案：

您的问题的解决方案是通过设置更高的

z-index

值将脉冲按钮移动到更高的层。在下面的代码片段中，我将其设置为1，您可以看到它解决了问题

*，*：之前，*：之后{
框大小：边框框；
}
.btn_交换a{
位置：相对位置；
显示：块；
浮动：左；
宽度：150px；
颜色：#ffffff；
字体大小：14px；
文字装饰：无；
文本对齐：居中；
字体大小：粗体；
背景：#0ea2d3；
盒影：0 3px0 rgba（7154190,0.75）；
}
@关键帧脉冲{
0% {
变换：比例（1）；
}
50% {
转换：标度（1.05）；
}
100% {
变换：比例（1）；
}
}
a、 abc{
z指数：1；
动画：脉冲1s线性无限；
}
#魔盒阿凡达{
位置：相对位置；
显示：块；
宽度：125px；
高度：125px；
保证金：0自动；
边界半径：62.5px；
边框：2个实心#ccc；
溢出：隐藏；
}
#阿凡达{
宽度：125px；
高度：125px；
边界半径：62.5px；
光标：指针；
}
#bg_gray{
位置：绝对位置；
宽度：100%；
底部：0；
填充：8px 0 10px 0；
背景#4c4747；
不透明度：0.8；
}
#bg_灰色img{
显示：块；
宽度：20px；
保证金：0自动；
}

---

谢谢，我尝试将相机图标放在头像上方，并为灰色背景和头像设置z索引。它解决了这个问题：）