Cross-browser border-radius
Една от най-болните теми за наборчиците е закръгляването на ъглите. Напоследък ситуацията се подобрява и браузърите бавно започват да поддържат така необходимите CSS свойства. FF, Safari, Chrome правят това чрез свойства със собствени специални префикси, Opera скоро ще го прави без префикси. Освен това имаме, както винаги, IE.
За щастие, IE може да бъде победен доста добре със собствени средства. Едно от любимите ми решения, използващи VML и поведение, е извит ъгъл. За да използвате, обединете border-radius.htc, подредете го до CSS и използвайте следния код:
Да, между другото, в квартала можете да намерите по-малко популярно, но все пак полезно поведение за box-shadow.
RSS коментари по имейл OK
border-radius.htc: ред #60
Благодаря ви, навреме, но по принцип дори и без хак вече имам идеологията да раздавам блокове без заоблени ръбове, основното не е бял текст на бял фон.
Просто супер! Не мислех, че е възможно. Освен това в IE ъглите изглеждат перфектно, без никакви артефакти. Благодаря за информацията!
Но при мен работи само във FF и Chrome. И в последните завои са много очукани.
Хубаво нещо! Жалко е, че не работи правилно с дефиниции на радиус като "0 10px 10px 0", в противен случай нямаше да има заместител!
Но какво да кажем за Операта? Дори 10ka не поддържа border-radius.
Opera ще навакса скоро. Вече е възможно да се достави доста поносима тестова версия, която го прави.
Има и друго решение - http://code.google.com/p/rocon/
Знам за Рокон. Той се държеше лошо с мен, но като цяло много добро решение.
Rocon има свои собствени нюанси, например маржът между блоковете спря да работи за мен, т.е. блокове със заоблени ъгли, но като цяло нещо е интересно.
В Оператаот 10.50 ще има свойство за заобляне на ъгли.
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
-khtml-border-radius: 10px; /* KHTML */
Не мисля, че е кошер. итерирането на свойства за всеки браузър не е моя мечта (:
струва си да изцапаш този .htc по някакъв проект, благодаря!
благодаря за ръководството. Все още обаче няма "нормално" решение (потребителите на IE все още виждат граници с ъгли), вероятно по-добре "по старомодния начин" )
връзките в дясното меню на този сайт също са "ъглови" в началото, след част от секундата се заоблят :)
Много интересно решение, но не мога. Използвах този хак на моя сайт, на страницата "За мен", блокът с описание във всички дини със заоблени ъгли, в IE7 ъглите останаха същите. Файлът (border-radius.htc) беше хвърлен в корена на сайта.
Опитайте да го пуснете в /skin/alex/.
имаше подобна тема, докато не обясниха, че границата все още трябва да се декларира add border: 1px solid #[block background color];
имаше подобна тема, докато не обясниха, че границата все още трябва да се декларира add border: 1px solid #[block background color];**
Имам граница.
Сам, има и border-radius.htc, но проблема си остава по някаква причина. Досега това каку не съм го победил.
Същият проблем, направих всичко по-горе, но рамката не се закръгли.