CSS 如何使用border-radius htc hack和MSIE v：roundrect仅获得一个圆角？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2988554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get only one rounded corner with border-radius htc hack and MSIE v:roundrect?
提问by aarreoskari
I have a problem with partially rounded corners. See the first working example for most browsers:
我有部分圆角的问题。请参阅大多数浏览器的第一个工作示例：
.box {
display: block;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: yellow;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
You can see that only bottom right corner should be rounded. Natural choice would be adding a border-radius.htc hackinside a conditional IE statement:
你可以看到只有右下角应该是圆角的。自然的选择是在条件 IE 语句中添加一个border-radius.htc hack：
.box {
border-bottom-right-radius: 20px;
behavior:url(border-radius.htc);
}
This is not working because border-radius.htc file is only accessing normal border-radius value (this.currentStyle['border-radius']). VML used by the hack is roundrect which only supports one percentage value for arcsize.
这是行不通的，因为 border-radius.htc 文件只访问正常的边框半径值（this.currentStyle['border-radius']）。hack 使用的 VML 是 roundrect，它仅支持 arcsize 的一个百分比值。
So I was wondering if there is any other way around the problem by using some other VML elements?
所以我想知道是否有其他方法可以通过使用其他一些 VML 元素来解决这个问题？
Another problem is that htc-file doesnt's support borders but that can be fixed with VML's stroked attribute. Nifty corners for example doesn't work well with corners at all.
另一个问题是 htc-file 不支持边框，但可以使用 VML 的笔触属性来修复。例如，漂亮的角落根本不适用于角落。
回答by blackdad
I was able to get it to work with border-radius: 0 0 10px 10px;and htc from http://css3pie.com/
我能够border-radius: 0 0 10px 10px;从http://css3pie.com/使用它和 htc
回答by Krupp
The other solution: border-bottom-right-radius:10px;not to make the CPU calculate unneeded border roundings
另一个解决方案：border-bottom-right-radius:10px;不要让 CPU 计算不需要的边框舍入
