如何获得只有一个圆角与border-radius htc黑客和MSIE v：roundrect？ [英] How to get only one rounded corner with border-radius htc hack and MSIE v:roundrect?

问题描述

我有部分圆角的问题。查看大多数浏览器的第一个工作示例：

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

您可以看到只有右下角应该四舍五入。自然选择是添加 border-radius.htc hack 里面一个条件性的IE语句：

You can see that only bottom right corner should be rounded. Natural choice would be adding a border-radius.htc hack inside a conditional IE statement:

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

这不工作，因为border-radius.htc文件只访问正常边框-radius value（this.currentStyle ['border-radius']）。 vml使用的是黑洞是圆整的，只支持一个百分比的值arcsize。

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.

所以我想知道是否有任何其他方式使用一些其他VML元素？

So I was wondering if there is any other way around the problem by using some other VML elements?

另一个问题是htc-file不支持边框，但可以使用VML的stroked属性修复。

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.

推荐答案

我能够使用 border-radius：0 0 10px 10px; 和htc来自 http://css3pie.com/

I was able to get it to work with border-radius: 0 0 10px 10px; and htc from http://css3pie.com/

这篇关于如何获得只有一个圆角与border-radius htc黑客和MSIE v：roundrect？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！