CSS Corner Изображение/Radius

Question

я использовал этот стиль углов:

.corners4{ 
    background:url(../img/panelHeaderColor.jpg) repeat-x; 
    -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; 
    -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; 
    -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; 
} 

, но это не работает в IE, есть ли IE эквивалент для этого? thanks

Answer 1

Если вы удалите -moz-часть свойства, у вас будет border-radius-topleft и так далее. Это объекты border-radius. Это только в стандарте CSS3. При текущей записи IE, CSS3 должен поддерживаться примерно в 2017 году. Если вы хотите, чтобы он работал в Safari, вы можете использовать -webkit-border-radius. См. this question для получения дополнительной информации о закругленных углах.

Answer 2

-moz- part означает «Mozilla» - это свойство не поддерживается IE.

Для этого не существует эквивалента CSS, который работает во всех браузерах. По крайней мере, пока.

Изогнутые углы - это серьезная боль взади, чтобы реализовать с помощью javascript, и большинство решений не очень надежны. К сожалению, абсолютный лучший способ добиться этого таким образом, чтобы все ваши пользователи могли наслаждаться, - это, к сожалению, старый способ использования ваших собственных изображений в качестве углов. This website упрощает процесс, по крайней мере. Если вы хотите рисковать в решениях JS, я хорошо слышал о curvyCorners.

Answer 3

IE кажется сложным с закругленными углами много раз. В целом, вы обнаружите, что он не поддерживается очень хорошо, и есть еще много пользователей, возвращающихся к IE5.5 или около того. Я бы порекомендовал другой подход.

Хотя я не помню точно, где я его узнал, я могу дать вам код, который у меня есть на моем сайте.

HTML код, который идет до вашего элемента:

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 

HTML код, который приходит после вашего элемента

<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> 

CSS код:

.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;} 
.b1 {height:1px; background: #000; margin:0 4px;} 
.b2 {height:1px; background: #fff; border-right:2px solid #000; border-left:2px solid #000; margin:0 2px;} 
.b3 {height:1px; background: #fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;} 
.b4 {height:2px; background: #fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 0px;} 

Приведенный выше код CSS, то # 000 будет вашим цветом границы. #FFF будет цвет вашего окна содержимого.

Вы не хотите иметь верхнюю и нижнюю границу на своем блоке контента, но затем установите левую и правую границу 1px, а затем цвет, которым должна быть граница.

В зависимости от вашей текущей реализации это может показаться несколько не таким приятным, и не стесняйтесь добавлять больше тегов b, применяя ту же логику, чтобы получить больший радиус. Если вы хотите увеличить радиус и не можете понять это, просто дайте мне знать, и я увеличу его, чтобы быть больше.

Последнее замечание, в зависимости от того, где вы их размещаете, вам может потребоваться немного изменить настройки полей.

Answer 4

Угловая проблема с номером IE, которая будет решена.

http://kbala.com/ie-9-supports-corner-radius/

Answer 5

Проверить этот сайт: http://border-radius.com/ это generats CSS для WebKit, Gecko, CSS3. Пример:

-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px;