如何使用border-radius htc hack和MSIE v：roundrect仅获得一个圆角？

Posted 2023-03-05

【中文标题】如何使用border-radius htc hack和MSIE v：roundrect仅获得一个圆角？

【英文标题】：How to get only one rounded corner with border-radius htc hack and MSIE v:roundrect?

【发布时间】：2011-02-28 15:13:53

【问题描述】：

我遇到了部分圆角的问题。请参阅大多数浏览器的第一个工作示例：

.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;

您可以看到只有右下角应该是圆角的。自然的选择是在条件 IE 语句中添加 border-radius.htc hack：

.box 
  border-bottom-right-radius: 20px;
  behavior:url(border-radius.htc);

这不起作用，因为border-radius.htc 文件仅访问正常的border-radius 值（this.currentStyle['border-radius']）。 hack 使用的 VML 是 roundrect，它只支持 arcsize 的一个百分比值。

所以我想知道是否可以通过使用其他一些 VML 元素来解决这个问题？

另一个问题是 htc-file 不支持边框，但可以通过 VML 的 stroked 属性来解决。例如，漂亮的角落根本不适用于角落。

【参考方案1】：

我能够让它与border-radius: 0 0 10px 10px; 和来自http://css3pie.com/ 的htc 一起工作

【讨论】：

很好的答案，我可能应该自己解决这个问题

有关边界半径的更多信息：css-tricks.com/almanac/properties/b/border-radius

完美！不知道为什么这没有被标记为真正的答案！

角的顺序：top-left、top-right、bottom-right、bottom -左

【参考方案2】：

另一种解决方案：border-bottom-right-radius:10px; 不让 CPU 计算不需要的边框舍入

【讨论】：

谢谢。为我工作。