Подтвердить что ты не робот

Как получить только один закругленный угол с hzc-ракурсом с границей и MSIE v: roundrect?

У меня проблема с частично закругленными углами. См. Первый рабочий пример для большинства браузеров:

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

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

Это не работает, потому что файл border-radius.htc имеет доступ только к нормальному значению радиуса границы (this.currentStyle ['border-radius']). VML, используемый хаком, является roundrect, который поддерживает только одно процентное значение для arcsize.

Итак, мне было интересно, есть ли какой-нибудь другой способ проблемы, используя некоторые другие элементы VML?

Другая проблема заключается в том, что htc файл не поддерживает границы, но может быть исправлен с использованием атрибута VML. Например, ничтожные углы не работают хорошо с углами.

4b9b3361

Ответ 1

Мне удалось заставить его работать с border-radius: 0 0 10px 10px; и htc из http://css3pie.com/

Ответ 2

Другое решение: border-bottom-right-radius:10px;, чтобы процессор не вычислял ненужные округления границ