Проблема с углом границы CSS - PullRequest
Новая
       19

Проблема с углом границы CSS

1 голос
/ 30 марта 2011

Я создаю меню с 4 различными цветными границами. При просмотре в Safari 5 левая и правая границы проходят сверху вниз без углов вокруг рамки. При просмотре в FF 4 существует граничный угол у элементов border-bottom и border-right. Это заставляет меню выглядеть по-разному в разных браузерах. Вот CSS для пункта меню: 

ul#mainnav a {
   display: block;
   text-decoration: none;
   color: #b0c9da;
   padding: 7px 7px 7px 14px;
   border-bottom: 1px solid #01304f;
   border-top: 1px solid #1a74af;
   border-right: 1px solid #fff;
   border-left: 1px solid #246792; }

Пожалуйста, сообщите. Спасибо

1 Ответ

3 голосов
/ 31 марта 2011

Это вызвано тем, что браузеры определяют, где начинать границу и где ее заканчивать.К сожалению, нет решения для этого.Лучше всего выбрать граничные цвета, которые достаточно похожи, чтобы они не выделялись настолько сильно.

Еще один вариант, требующий поддержки современных браузеров / CSS3, - использовать тень блока на элементе.Например: 

box-shadow: inset 1px 1px 1px rgba(255,0,0,1), 
            inset 1px -1px 1px rgba(0,255,0,1);

Вы можете добавить несколько слоев теней от блока шириной всего 1 пиксель и указать направление, в которое они «падают».Может быть весело играть.

...