[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Общая информация » Вопросы по uCoz » Как сделать скругленные углы различными способами?
Как сделать скругленные углы различными способами?
RedStarДата: Пятница, 15.08.2014, 17:33 | Сообщение # 1
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Скругленные углы в CSS для Firefox и Chrome

Код
<title>Скругление углов CSS методами</title>
<style type="text/css">
div {
border: 1px solid #434343;
padding: 10px;
background: #e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 500px
}
</style>
</head>
<body>
<div>
Блок будет иметь скругленные углы, если страницу рассматривать в браузерах Firefox, Chrome или Safari.
</div>
</body>



Атрибуты и значения-moz-border-radius – определяет скругленные углы для браузеров Firefox.-webkit-border-radius – определяет скругленные углы для браузеров Chrome.Еще один пример скругления углов CSS методами:
Код
<title>Углы, скругленные CSS атрибутами</title>
<style type="text/css">
div {
border: 2px solid #434343;
padding: 47px;
background: #e3e3e3;
-moz-border-radius: 120px;
-webkit-border-radius: 120px;
width: 132px
}
</style>
</head>
<body>
<div>
Блок будет иметь скругленные углы, если страницу рассматривать в браузерах Firefox, Chrome или Safari.
</div>
</body>


Результат:



Если вам нужно скруглить только левы углы или только правые углы, или соответственно верхние и нижние, то действительна следующая запись:

-moz-border-radius-bottomleft: 3px   – скругление нижнего левого угла радиусом в 3 пикселя для браузеров Firefox.
-moz-border-radius-bottomright: 3px   – скругление нижнего правого угла радиусом в 3 пикселя для браузеров Firefox.
-webkit-border-bottom-left-radius: 3px   – скругление нижнего левого угла радиусом в 3 пикселя для браузеров Chrome.
-webkit-border-bottom-right-radius: 3px   – скругление нижнего правого угла радиусом в 3 пикселя для браузеров Chrome.
В момент написания урока, скругление углов не поддерживают web-браузеры Internet Explorer и Opera. Как будут развиваться события дальше пока не известно. Прийдут ли разработчики браузеров к единодушному решению на предмет введения border-radius — остается вопросом.

Чтобы вы могли скруглить углы уже сегодня, я подготовил для вас два примера кросс-браузерных методов скругления углов с помощью изображения и CSS.

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

Помню, мне было нужно скруглить углы для блока меню... Первое, что я сделал — это создал в графическом редакторе Photoshop два небольших изображения:

Добавил следующий код:

Код
<title>Углы, скругленные CSS методами с помощью изображения</title>
<style type="text/css">
div.menu {border:1px solid #bbb; border-bottom:none; border-top:none; width:204px; background-color:#f6f6f6}
</style>
</head>
<body>
<img src="../images/gtop.png" alt="" />
<div class="menu">
</div>
<img src="../images/gbot.png" alt="" />
</body>





Если к стилевым описаниям блока прибавить height:100px, получится вот что:




Кросс-браузерное скругление углов в CSS или как скруглить углы с помощью изображения, таблицы и CSS атрибутов

Данный метод скругления углов заключается в следующем: в одной из ячеек мы размещаем первое изображение, в другой – второе, а центральную ячейку форматируем при помощи CSS так, чтобы все правильно срослось.

Рассмотрим пример:



Код
<title>Углы, скругленные CSS методами с помощью изображения</title>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="../images/gtop.png" alt="" /></td>
</tr>
<tr>
<td style="border-left:1px solid #bbbbbb; border-right:1px solid #bbbbbb; height:140px; background-color:#f6f6f6"></td>
</tr>
<tr>
<td><img src="../images/gbot.png" alt="" /></td>
</tr>
</table>
</body>


Результат:


 
Форум » Общая информация » Вопросы по uCoz » Как сделать скругленные углы различными способами?
Страница 1 из 11
Поиск:


Copyright "IPC" © 2008
Хостинг от uCoz