CSS, как получить закругленные углы на кнопке. - PullRequest
Новая
       2

CSS, как получить закругленные углы на кнопке.

4 голосов
/ 01 марта 2011

У меня есть кнопка с CSS, и у нее нет закругленных углов. У меня есть левое и правое изображения (углы), как я могу применить их к CSS ниже? Спасибо за любую помощь. 

.myButton
{
    background-image: url(../../Images/SubmitButtonBack.png);
    color: White;
    font-family: Verdana;
    font-weight: bold;
    font-size: 8pt;
    width: 160px;
    height: 22px;
    border: none;
    position: relative;
    cursor: pointer;
    margin-bottom:5px;
}

Ответы [ 6 ]

9 голосов
/ 01 марта 2011

CSS3 позволяет вам сделать это, указав border-radius вместо

http://www.css3.info/preview/rounded-border/

2 голосов
/ 01 марта 2011

Решение css3 будет работать во всех браузерах не IE и IE начиная с версии 9 (в следующем месяце?).

Если вы хотите повысить совместимость с IE8, вы можете использовать :before:after: 

.myButton:before {
  content: url(/path/to/left_image);
}
.myButton:after{
  content: url(/path/to/right_image);
}

Если IE8 недостаточно хорош, вы должны использовать ответ @ Wolfy87.

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

Используйте плагин jQuery за круглым углом.

http://jquery.malsup.com/corner/

Поддерживается во всех браузерах, включая IE.Никаких изображений не требуется.Он рисует углы в IE, используя вложенные элементы div (без изображений).Он также имеет встроенное округление радиуса границы в браузерах, которые его поддерживают (Opera 10.5+, Firefox, Safari и Chrome).Поэтому в этих браузерах плагин просто устанавливает вместо этого свойство css.

Вот как его использовать

Вам необходимо включить jQuery и js-скрипт Corner перед </body>.Затем напишите свой jQuery как <script>$('div, p').corner('10px');</script> и поставьте перед ''.Таким образом, ваш HTML будет выглядеть как приведенный ниже код.Здесь я делаю круглые углы для всех тегов div и p.Если вы хотите сделать это для определенного идентификатора или класса, то вы можете сделать что-то вроде $('#myid').corner();

<body>
    <div class="x"></div>
    <p class="y"></p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script>$('div, p').corner();</script>
</body>

Проверьте рабочий пример на http://jsfiddle.net/VLPpk/1

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

Методы, упомянутые в других ответах, в основном включают CSS3, который не совсем кросс-браузерный.Я думаю, что вы должны попробовать использовать технику раздвижных дверей .Это 100% кросс-браузер и будет использовать угловые изображения, которые у вас уже есть.

0 голосов
/ 01 марта 2011

CSS3 дает вам возможность использовать закругленные углы с border-radius, в то время как хорошо использовать префиксы вендора -webkit и -moz, что-то вроде следующего: 

-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1+, Android 1.5+ */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */

Имейте в виду, что Internet Explorer не поддерживает это свойство. Решение состоит в том, чтобы использовать скрипт типа css3pie , который переносит свойства css3 в Internet Explorer.

Демо: http://jsfiddle.net/sUegC/1

0 голосов
/ 01 марта 2011

Другие говорят, что используют border-radius, что на 100% точно.Вот небольшая демонстрация.

http://jsfiddle.net/TJcGc/

...