Добро пожаловать, Гость!
3акругленные края - Страница 1
Темы оформления | 3акругленные края
Искатель
: 3акругленные края
30 Янв 2013Делаем закругленные края у div блока с помощью css
Прежде всего, этот урок будет полезен Web - мастерам которые занимаются вёрской шаблонов. Оформление сайта смотрится лучше, если края блоков слегка закруглены и не имеют острых углов.
Чтобы достич такого эффекта с помощью графических элементов, которые будут оформлять углы, уйдёт не мало времени на их создание, а после всего этого, потребуется написать не мало кода чтобы всё это оформить.
На помощь нам приходит css3 с его новыми свойствами.
Живой пример div блока с закруглёнными углами.
Компактный код, который и создаёт данный эффект.
-=css=-
1 div {
2 webkit-border-radius: 5px;
3 moz-border-radius: 5px;
4 border-radius: 5px 5px 5px 5px;
5 border:1px solid #000000;
6 height:50px;
7 }
-=html=-
1 <div id="div">
2 <!--Содержимое блока-->
3 </div>
В моём случае размер закругления равен 5px, если вы хотите сделать их больше или меньше, измените это значение в каждой строке.
Комментарии:
gefonS 
30 Янв 2013webkit-border-radius эта фукция больше подходит для хрома и так себе к опере
moz-border-radius а эта функция для FireFox по русски мозила и Safari
gefonS 30 Янв 2013кстати да. за закругленные края отвечает
4 border-radius: 1px 2px 3px 4px;
Где равно так:
1px = левый верхний угол
2px = правый верхний угол
3px = правый нижний угол
4px = левый нижний
мобильные браузеры не все отбражают эту функцию
в вот как у тебя
4 border-radius: 5px 5px 5px 5px;
можно заменить на
4 border-radius: 5px;
это будет закругление всех углов по 5px
saitanet 30 Янв 2013нахрена дописывать webkit-border-radius: 5px;
и moz-border-radius: 5px;
если есть border-radius: 5px 5px 5px 5px;?
inteam 
18 Янв 2013gefonS, на обычной опере мини видно не будет, либо с компа смотреть либо с 11 оперы для смартфонов, вот через нее можно увидеть всю красоту цсс3
______________________
Повар в законе
