背景动画未剪辑在圆角容器上答案

【问题标题】：background animation not clipped on rounded corners container背景动画未剪辑在圆角容器上
【发布时间】：2012-02-26 11:39:39
【问题描述】：

我为复选框创建了一个很酷的主题，将它们呈现为带有动画的 iOS-5 样式按钮，全部在 CSS 中，但是我有一个烦人的问题，即背景没有被剪裁到 webkit 上圆角。我知道这个 bug 是因为剪辑容器有 position 导致了这个问题，但我想不出任何方法来解决这个问题..

有人知道如何处理这个问题吗？
我已经研究了这个错误，没有发现任何有用的东西。 10 倍！

CHECK THE DEMO（在 Firefox 上运行良好）

【问题讨论】：

标签： css google-chrome webkit core-animation

【解决方案1】：

添加这个确实有效：

.togglebox label::before {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.togglebox label::after {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

我还要对“已检查”状态进行小修改：

.togglebox input:checked ~ label { left: -61px }

但问题是复选框变得可见。添加一些简单的东西，例如：

#chkbx {position: absolute; left: 10px;}

应该可以解决这个问题。

这是 jsfiddle：http://jsfiddle.net/XCKau/2/

我建议你不要显示：无；在输入！只是要确定。 - 刚刚测试过：当它不在display: none; 中时，使用 IE8 的人仍然可以使用该复选框。如果您确实使用它，他们将无法“检查”任何内容。

【讨论】：

在我的浏览器中仍然不完美。 visibility:hidden; 隐藏复选框怎么样？这行得通吗？
@Alex 那是什么浏览器？我已经在每个主要浏览器上测试了我的 jsfiddle 并且它可以工作（不包括
老实说：我不认为你能接触到你能接触到的观众。 IE 的份额还是很大的，所以基本功能应该是任何人都可以访问的。
但问题是当用户没有使用支持 css/css3 的设备时，它不能只选中该框，因为它是隐藏的。如果您只是将它隐藏在 css 元素下方，它可能仍会显示（就像在 IE8 中一样）。啊，我明白你的意思了。我现在不知道如何解决。
一开始我也是这么想的，但由于某种原因，IE8 仍然显示复选框并且它没有被隐藏（如您所见here）。我会用条件样式表来做这件事，并确实像你说的那样将它隐藏在 css3 样式表中。

【解决方案2】：

这比以前好多了……但还不够完美。

http://jsfiddle.net/XCKau/1/

为 label:before 和 label:after 添加边框半径并隐藏复选框：

.togglebox label::before{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.togglebox label::after{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
input[type=checkbox]{
    visibility:hidden;
}

【讨论】：

为什么要投反对票？我写道它并不完美，但仍然比你的好。
因为显然我已经考虑过这一点并驳回了这个想法..没有冒犯伙伴，我只是觉得被吐在脸上，给我这样的解决方案不尊重我的 CSS 技能，显然是问题所在手头比舍入内部元素的某些角落要大得多...... :)
“显然”不是每个人都知道你的 css 技能 ;) 如果你已经尝试过了，我很抱歉，但我只是想帮忙。