Ещё раз про закругленные углы
Тема закруглённых углов и их реализации многим уже наверняка набила оскомину :)Всё-таки я предложу свои четыре кроссбраузерных способа создания закруглённых углов, которые тянутся по ширине и длине, с использованием минимального количества пустых тегов и изображений.
HTML (общий для всех четырёх примеров):
<div class="wrap"> <div class="tr"></div><div class="tl"></div> <div class="content"> <!--// сюда вставляется содержимое //--> </div> <div class="br"></div><div class="bl"></div> </div>
Первый способ
Подходит, если у вас однотонный фон.Работает во всех основных браузерах, даже в IE начиная с версии 5.5.
В этом и всех последующих способах используются четыре пустых тега и одна картинка.
CSS:
.wrap {
background-color:#afafaf; /* основной цвет вашего блока */
}
.content {
color:#fff; /* цвет текста */
padding:0 25px;
}
.tl, .tr, .bl, .br {
width:19px; /* здесь и далее цифру 19 замените на ширину вашего угла */
height:19px;
background:url("img/1.gif"); /* путь к вашему изображению */
}
.tr, .br {
float:right;
}
.bl {
background-position:0px 19px;
}
.br {
background-position:19px 19px;
}
.tr {
background-position:19px 0px;
}
Второй способ
С границей любой толщины и размера, но тоже подходит только для однотонного фона.Из минусов можно отметить то, что этот вариант не работает в IE 6.
CSS:
.wrap {
background-color:#eff5ff; /* основной цвет вашего блока */
border:3px solid #86afd8; /* замените 3px на ширину вашей рамки и поменяйте цвет рамки */
}
.content {
color:#234261; /* цвет текста */
padding:0 25px;
}
.tl, .tr, .bl, .br {
width:22px; /* здесь и далее цифру 22 замените на ширину вашего угла */
height:22px;
background:url("img/2.gif"); /* путь к вашему изображению */
margin:-3px; /* замените 3px на ширину вашей рамки. не убирайте минус! */
}
.tr,.br {
float:right;
}
.bl {
background-position:0px 22px;
}
.br {
background-position:22px 22px;
}
.tr {
background-position:22px 0px;
}
Третий способ
В этом варианте используются прозрачные углы, поэтому его можно использовать на любом фоне.Минусы: если вы используется 24-битный PNG, в IE 6 и ниже придется использовать картинку в 8-битном PNG или GIF.
Для IE 7 потребуется небольшой костыль из-за проблем с отступами:
<!--[if IE 7]><style>.tr, .br {
margin-left:0;
}</style><![endif]--> CSS:
.wrap, .content {
background-color:#a4c771; /* основной цвет вашего блока */
}
.content {
color:#fffddf; /* цвет текста */
padding:0 25px;
margin:0 -20px; /* замените 20px на ширину вашего угла. не убирайте минус! */
}
.tl, .tr, .bl, .br {
width:20px; /* здесь и далее цифру 20 замените на ширину вашего уголка */
height:20px;
margin:0 -20px; /* замените 20px на ширину вашего угла. не убирайте минус! */
background:url("img/3.png"); /* путь к вашему изображению */
}
.tr, .br {
float:right;
}
.bl {
background-position:0px 20px;
}
.br {
background-position:20px 20px;
}
.tr {
background-position:20px 0px;
}
Четвёртый способ
Те же самые прозрачные углы + рамка.Минусы: те же, что и в предыдущем способе.
Для поддержки IE 6 добавьте в код следующее:
<!--[if IE 6]><style> .content {border-bottom:3px solid #c53f5e;}</style><![endif]-->
Для поддержки IE 7 добавьте в код следующее:
<!--[if IE 7]><style>
.tr, .br {
margin-left:0;
}
.wrap {
border-bottom:0;
background:#fff7fa url("ie-hack.gif") repeat-x bottom;
}
</style><![endif]-->
Вместо ie-hack.gif используйте свой рисунок длиной в 1 пиксель и шириной вашей рамки, залитый тем же цветом, что и рамка.
CSS:
.wrap, .content {
background-color:#fff7fa; /* основной цвет вашего блока */
border:3px solid #c53f5e; /* замените 3px на ширину вашей рамки и поменяйте цвет рамки */
}
.wrap {
margin:22px;
border-width:3px 0;
}
.content {
color:#6b0c22; /* цвет текста */
padding:0 25px;
margin:0 -22px; /* замените 22px на ширину вашего уголка. не убирайте минус! */
border-width:0 3px;
}
.tl, .tr, .bl, .br {
width:22px; /* здесь и далее цифру 22 замените на ширину вашего уголка */
height:22px;
margin:-3px -22px; /* первую цифру замените на ширину рамки, вторую на ширину вашего угла */
background:url("img/4.png"); /* путь к вашему изображению */
}
.tr, .br {
float:right;
}
.bl {
background-position:0px 22px;
}
.br {
background-position:22px 22px;
}
.tr {
background-position:22px 0px;
}
Как создать картинку для блока?
Очень просто.
 |
В вашем любимом графическом редакторе рисуете прямоугольник со скруглёнными углами. Такой, например. |
 |
Затем вырезаете один угол. Ширина выделения и будет шириной угла, которую вы будете указывать в CSS. |
 |
Создаёте изображение с размерами вдвое больше ширины угла. Вставляете туда угол. |
 |
Отражаете угол зеркально сначала горизонтально, |
 |
а затем вертикально. |
А то я уже начала думать, что мой способ создания закруглённых углов никому не нужен.
Но в целом польза от высшего образования порой в документе тоже верно...
Но вы не думали , что есть большие города и т.п.
Например та же Москва.
И порой высшее образование не даст тех знаний которые нужны напрямую , а позволит познакомиться с людьми которые расширят мировоззрение...
Но если высшее образование не даёт необходимых знаний, как вы сами признаёте, то зачем оно тогда нужно?
Искать связи и общаться с более опытными коллегами по цеху, разумеется, нужно, но ведь это можно делать и не обучаясь в высшем учебном заведении.