CSS border-radius без вендорных префиксов? - PullRequest
Новая
       4

CSS border-radius без вендорных префиксов?

0 голосов
/ 06 апреля 2011

Есть ли способ сделать границу радиуса без -moz, потому что это работает только в браузерах Mozilla? 

-moz-border-radius-topleft:3%;
-moz-border-radius-topright:3%;
-moz-border-radius-bottomright:3%;
-moz-border-radius-bottomleft:3%;

Ответы [ 3 ]

5 голосов
/ 06 апреля 2011

Используйте префикс поставщика для -webkit и версию без префикса, например так ... 

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

Я почти уверен, что Firefox 4 теперь поддерживает свойство без вендора.

1 голос
/ 06 апреля 2011

Вы можете пойти по пути jQuery и получить отличный плагин за круглым углом на

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

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

Вот как это сделать

Вам необходимо включить jQuery и js-скрипт Corner до </body>. Затем напишите свой jQuery как $ ('div, p'). Corner ('10px'); и поставить перед ''. Таким образом, ваш 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 голос
/ 06 апреля 2011 
-moz-border-radius:3%;
-webkit-border-radius:3%;
-o-border-radius:3%;
border-radius:3%;

и т. Д., Это не стандарт * ized *, поэтому вы не можете не должны использовать только border-radius.

Читатьhttps://developer.mozilla.org/en/CSS/border-radius

...