CSS Corner Image / Радиус

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 эквивалент для этого? спасибо

Answer 1

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

Answer 2

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

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

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 будет цвет поля вашего контента.

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

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

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

Answer 4

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

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

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

Answer 5

Вопрос с угловым радиусом IE решит.

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