Переносные круглые углы на кнопке html

Question

У меня есть простая кнопка HTML, которую я обертываю в div. Я знаю, что такие кнопки могут отображаться по-разному в разных браузерах.

<div id="but_begin"><button type="button" id="but2_begin">Go</button></div>

Я установил следующий CSS на кнопке (используя JQuery):

$("#but2_begin").css({
    backgroundColor: "yellow",
    width:50
});

и выглядит следующим образом:

Я бы хотел избавиться от окружающих его теней и скруглить углы. Теперь я немного пугаюсь, когда читаю всю доступную в сети информацию о расположении кнопок и закругленных углах. Кажется, что оно не сходится вообще.

Мой вопрос: как я могу установить закругленные углы на кнопке HTML переносимым способом? Это возможно только с CSS? Или я должен использовать библиотеку? Или я должен использовать другой HTML-тег или метод?

Answer 1

«Тень», о которой вы говорите, идентифицирует границу кнопки.Установите border:none; и оно пропало.Скругленные углы вы можете сделать с чистым CSS, но только тогда, когда все в порядке, этот старый браузер не будет отображать его круглыми.Только более новые, которые поддерживают CSS3, повернут за углы.

.rounded-corners {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
}

Answer 2

Вы должны использовать CSS3 для создания закругленных углов и текстовых теней в портативном виде.http://css3generator.com/ - это удобный инструмент, который может помочь вам в этом.

Все больше браузеров поддерживают CSS3 и основные браузеры, такие как последние версии Chrome, IE, Safari, Opera и Firefox (более 90% пользователей), безусловно, поддерживают его.

Например, этот код из http://css3generator.com/ надежно создает округленные границы во множестве браузеров.

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