Виправляємо малювання border-radius
У браузерах, відмінних від Firefox, існують проблеми у змальовуванні блоків з border-radius.
Якщо блоку задані одночасно фон та рамка, то зовні закруглених кутів видно примарний однопіксельний ореол фонового кольору. Особливо помітно це у випадках, коли кольори фону блоку, його рамки та фону батьківського блоку дуже різняться. Донедавна це виявлялося в Chrome, Opera та IE9, зараз - в Opera (11.5) та IE9:
Якщо рамка має різні кольори для різних сторін блоку, то в Chrome 13 та IE9 на стику різних частин рамки також видно однопіксельну лінію фонового кольору:
У Chrome 13 при великих товщині рамки та радіусі закруглення внутрішній периметр закругленої рамки малюється грубою, майже ламаною лінією:
CSS-код, що ілюструє проблему:
.buggy background: #fff; border: 70px solid #000; border-radius: 100px; height: 60px; >
Ці проблеми можна обійти, замінивши блок на два, вкладених один в одного, задаючи потрібний фоновий колір як фон внутрішнього блоку, колір рамки - як фон зовнішнього блоку, і задаючи для зовнішнього блоку внутрішній відступ (padding), рівний потрібної товщині рамки.
CSS: .ok background: #000; /* Колір рамки */ border-radius: 100px; Padding: 70px; /* Товщина рамки */ >
.ok > DIV background: #fff; /* Колір тла */ border-radius: 30px; /* Радіус закруглення зовнішнього блоку мінус товщина рамки */ height: 60px; /* Для наочності */ >
Якщо по дизайну рамка повинна мати різні кольори для різних сторін блоку, замість padding для зовнішнього блоку можна задати безпосередньо рамку. При цьому можливий зазор між внутрішнім блоком та рамкою зовнішнього блоку можна замаскувати, частково насунувши внутрішній блок на зовнішній рамку за допомогоюнегативного поля (margin) в 1-2 пікселі з паралельним збільшенням товщини рамки (border-width) зовнішнього блоку на цю ж величину з метою компенсації зсуву.
Дивно, але у Firefox аналогічна проблема. FF 16.02.
Передрук будь-яких матеріалів сайту в будь-якому обсязі заборонено