01.03.2012, 08:53

Закругление углов разными способами.


Вариант 1.

С помощью CSS.

В CSS прописываем свойство для стиля .corners, а в "HTML" коде в <table> прописываем класс <table class="corners" ....
Для многих браузеров свойство "border-radius" является нестандартным, поэтому оно применяется совместно с вендорным префиксом: -moz-border-radius - для Mozilla Firefox, SeaMonkey; -webkit-border-radius - для Safari, Chrome.

Пример:
Code

<html>
<head>
<title>Закруглить углы</title>
<meta http-equiv="Content-Language" content="ru"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
<!--
a:link {
color: #0080FF;
text-decoration: none;
}
.corners {
border: 1px solid silver;
border-radius:10px;
-moz-border-radius: 10px; /*для Mozilla Firefox, SeaMonkey;*/
-webkit-border-radius: 10px; /*Safari, Chrome.*/
padding: 5px;
}
-->
</style>
</head>
<body>
<table class="corners" width="200" align="center" bgcolor="#00FF00" height="100">
<tr>
<td align="center">Вариант 1</td>
</tr>
</table>
</body>
</html>

Результат


Вариант 2.

Не применяя свойства CSS.

Прописываем в HTML коде в <table> такой стиль:

<table style="border: 1px solid silver; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 10px;"><tr><td>Вариант 2 </td></tr></table>

Пример:
Code

<html>
<head>
<title>Закруглить углы</title>
<meta http-equiv="Content-Language" content="ru"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<table width="200" height="100" bgcolor="#FFFF00" style="border: 1px solid silver; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 10px;"><tr><td align="center">Вариант 2</td></tr></table>
</body>
</html>

результат:


Вариант 3.

С помощью Дивов.

Пример:
Code

<html>
<head>
<title>Закруглить углы</title>
<meta http-equiv="Content-Language" content="ru"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<div style="background-color: #00FFFF; border: 1px solid silver; margin: 5px auto; padding: 10px; width: 200px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;"> Вариант 3
</div>
</body>
</html>

результат:


Во всех трёх вариантах можно менять ассиметрию, радиусы закругления каждого угла. Требуется только прописать для каждого угла своё значение: 10px 5px 30px 15px.
Результат:


Пометка для ИЕ
В Internet Explorer свойства "border-radius" не работает и поэтому используют скрипт разработанный "Remiz Rahnas border-radius.htc" или "PIE.htc", который загружается в корневую папку сайта. В CSS для стиля .corners прописывается дополнение:

"behavior: url(папка где лежит скрипт/border-radius.htc)"

Пример:
Code

.corners {
border: 1px solid silver;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 10px;
behavior: url("htc/border-radius.htc");  


Источник/Автор: vamvpomosh.ru

Категория: HTML, CSS, JS, JQ | Добавил: сумрачная-фея (01.03.2012) Просмотров: 1974 | Рейтинг: 4.0/3
Всего комментариев: 5
-2  
1 Voker -Infoscript Team-  (01.03.2012 14:02) [Материал]
Аватар пользователя
Статья взята из интернета! уникальность 7%

+2  
2 сумрачная-фея   (01.03.2012 20:23) [Материал]
Аватар пользователя
Я знаю!? Внизу вообще-то написан источник.
Почему я должна уникальное что-то придумывать? Это раздел уникальных идей что ли. Убери комент свой с восклицательными знаками и процентами. Я просто статью выложила, и заявки ни на какие конкурсы не подавала!Так что не надо мне тут "ля-ля"

+1  
3 antisept -Infoscript Team-  (01.03.2012 20:31) [Материал]
Аватар пользователя
Полезная статья smile

0  
4 Сай_22 -Infoscript Team-  (02.03.2012 10:10) [Материал]
Аватар пользователя
-------------------------------------------
Quote
Не применяя свойства CSS.

Code
style="border: 1px solid silver; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 10px;"

Это типа древний язык инков применили, или что? Это тот же CSS, но вписанный напрямую.

0  
5 Victor   (02.03.2012 14:02) [Материал]
Аватар пользователя
Да да да! Я тоже на это внимание обратил!

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]