vml

Решение проблемы скруглённых уголков через VML есть в статье Льва Солнцева «Кроссбраузерные закруглённые уголки» (без JavaScript). Проблема заключается в следующем:

В VML есть предопределённая фигура: прямоугольник с закруглёнными углами roundrect. […] Но у этой фигуры есть один значительный недостаток: радиус кривизны задаётся через отношение к большей стороне, что делает результат непредсказуемым и неподходящим для многих случаев.

То есть, при одинаковом параметре закругления блоков разного размера, радиус кривизны будет различаться.

Что я хочу сказать по поводу статьи «Хитрая тень» в блоге Олега Мохова?

<html>
<head>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
.vml {
    behavior: url(#default#VML);
    -ms-behavior: url(#default#VML);
    font: 12px Tahoma, sans-serif;
}
#bar1 {
    width: 400px;
    height: 60px;
    color: white;
    padding: 12px;
    display: block;
}

#bar2 {
    width: 20px;
    height: 22px;
    padding: 12px;
    color: white;
    position:absolute;
}
</style>
</head>

<body>

  <v:roundrect class="vml" id="bar1" fillcolor="navy" strokecolor="navy" strokeweight="1px" arcsize="0.1">
  Привет, ребята из W3C! Отсталый Internet Explorer уже много-много лет умеет смешивать векторный язык и
  HTML, а в 2010 году не все продвинутые браузеры так умеют.
  <v:shadow class="vml" on="true" opacity="0.3" color="navy" offset="7px,5px" />
  </v:roundrect>

   <v:shape class="vml" id="bar2"
   fillcolor="red" strokecolor="red"
   coordorigin="0 0" coordsize="200 200"
   path="m 1,1 l 800,1, 800,400, 1800,400, 1800,1500, 1,1500, x e">
   <v:shadow class="vml" on="true" opacity="0.3" color="red" offset="7px,5px"  />
    <p>Привет<br />ещё раз!</p>
    <p>Вы знаете, уже Internet Explorer 5.0 умеет делать непрямоугольные блоки.</p>
    <p>Причём, делает это непринуждённо.</p>
   </v:shape>
</body>

</html>

Что IE умеет круче ещё с пятой версии.

Добавлено позднее: в комментариях мне подсказывают, что в IE8/9 надо либо включать режим эмуляции, либо использовать «-ms-behavior» и позиционировать элементы абсолютно.

«Raphaël» — небольшая (18 килобайт) библиотечка для быстрого применения графических эффектов (на сайте есть примеры отражения, вращения картинки и текста) и работы с графическими примитивами.

Работает под Safari 3.0+, FireFox 3.0+, Opera 9.50+, IE 6.0+. Используются SVG и VML. Как видно, большинство браузеров самых последних версий, именно из-за SVG. Надеюсь, автор со временем сделает degradation через Canvas, который работает медленее, но зато поддерживается предыдущими версиями Safari, FireFox и Opera.

Совершенно случайно обнаружил поразительную штуку: оказывается IE, загружая картинку через VML, понимает альфа-прозначность у PNG:

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
<style>
    v\:* { behavior: url(#default#VML); display: inline-block; }
</style>
<v:image src="http://www.w3.org/Graphics/PNG/alphatest.png" style="width: 380px; height: 287px"></v:image>

К сожалению, есть существенный недостаток: картинка отображается чувствительно медленнее.