Закруглённые углы через CSS
Наверняка, Вы часто встречали блоки с закруглёнными углами. За примером далеко ходить не надо, достаточно посмотреть вправо и приглядеться к моим блокам, у которых как раз углы и закруглены. Стоит отметить, что способов создания этого очень много. У каждого из них есть свои преимущества и недостатки, и я рассмотрю один из них, которым обычно и пользуюсь.
Для начала потребуются 4 изображения, каждое из которых отвечает за свой угол блока. Далее напишите такой HTML-код:
<div class="roundborder">
<div>
<div>
<div>
<div>
<br />
</div>
</div>
</div>
</div>
</div>
И такой CSS-код:
.roundborder {
border: 2px solid #ffd460;
}
.roundborder div {
background: url(../images/t-l.png) top left no-repeat;
margin: -2px;
position: relative;
}
.roundborder div div {
background: url(../images/t-r.png) top right no-repeat;
margin: 0;
}
.roundborder div div div {
background: url(../images/b-r.png) bottom right no-repeat;
}
.roundborder div div div div {
background: url(../images/b-l.png) bottom left no-repeat;
padding: 20px;
}
По названию картинок, думаю, что их назначение понятно, однако, на всякий случай поясню:
- t-l - верхний левый угол
- t-r - верхний правый угол
- b-l - нижний левый угол
- b-r - нижний правый угол
Свойство padding Вы можете задавать своё, так как оно всего лишь делает отступ контента от закруглённой рамки. Также обратите внимание, свойство border должно быть толщиной с рамкой в картинке, а свойство margin: -2px, возможно, так же придётся поменять, поскольку это значение должно равняться ширине картинки, взятой со знаком минус.
Вот таким несложным способом делаются закруглённые углы через CSS. Большим преимуществом данного способа является то, что он является кроссбраузерным. А в качестве минуса я бы отметил большое количество div.
-
Создано 12.10.2011 09:53:52
-
Михаил Русаков
Комментарии (35):
Спасибо за статью... всё работает... только вот не могу понять КАК оно работает?!?!?!?!?
Ответить
Это всё гораздо проще делается!!! Не обязательно такой код писать! <div class="roundborder"> <div> <div> <div> <div> <br /> </div> </div> </div> </div> </div> Достаточно в CSS добавить к классу вот это: .roundborder { -moz-outline-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } Данный код работает только для браузеров поддерживающих CSS 3. Так что ни о какой кроссбраузерности не может быть и речи!
Ответить
Ни в коем случае так никогда не пишите! Это мало того, что не валидно, так ещё и работает только в самых современных браузерах. Поэтому порядка 50% не увидят закруглённых рамок.
Ответить
Это самая большая печаль в моей жизни! У меня весь сайт на этом построен!
Ответить
Большая часть Рунета пользуется либо Mozila либо Google Chrome. Оба браузера поддерживают border-radius!
Ответить
Только новые версии этих браузеров, которыми пользуются, как я уже сказал, не более 50%.
Ответить
На том сайт, который проверяет CSS на валидность, проверяется по стандарту CSS 2.1! Где можно проверить по стандарту CSS 3?
Ответить
На том же сайте всё и проверяется. Для этого разверните "Дополнительные возможности", и там всё будет.
Ответить
Спасибо огромное!
Ответить
как это работает
Ответить
Всё просто и понятно, но нужно более-менее знать HTML и CSS.
Ответить
А где писать имя это блока, а где содержимое.
Ответить
Содержимое блока там, где <br />. Вы его стираете и пишите там своё содержимое.
Ответить
<br /> Вроде XHTML уже прекратило своё развитие. А эти строгие тэги ещё пишут)
Ответить
Если никто не хочет мучаться с фотошопом - я сделал блок без картинок и могу с вами поделиться... код CSS .Box { width:200px; /* Ширина блока */ height: 100px; /* Высота блока */ background-color: #ffffff; /* Фоновый цвет*/ border: 2px solid #D4D4D4; /* Ширина и цвет границ*/ border-radius: 10px; /* Радиус границ*/ box-shadow: 0 0 15px #A9A9A9; /* Размер и цвет тени блока*/ margin-left: 130px; padding:10px; } HTML код <div class="Box"> Блок с углами </div>
Ответить
Михаил напишите пожалуйста про тени : box-shadow: Я просто когда смотрю на это прям так хочется очень красивые тени в блоке с закруглёнными углами... Напишите?
Ответить
Посмотрим.
Ответить
А не лехче так? #ugolkrug{ width:200px; /* Длина фигуры */ height:100px; /* Высота фигуры */ color: #0000; /* цвет текста */ background:#FF7F00; /* фон блока */ border: 3px #CCCCCC solid; /* стили рамки */ -moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */ -webkit-border-radius: 10px; /* закругл. для старых Chrome и Safari */ -khtml-border-radius:10px; /* закругл. для браузера Konquerer системы Linux */ border-radius: 10px; /* закругление углов для всех, кто понимает */ padding: 5px; /* внутренние отступы */ } а в HTML : <div id="ugolkrug">Закругление</div>
Ответить
Гораздо легче, но, к сожалению, в IE8 и ниже не работает. Плюс большое количество хаков - не есть хорошо.
Ответить
Зачем мучаться с фотошопом? Элементарно делается без фотошопа в течении 5-10 минут.
Ответить
Есть ли разница между изготовленными в фотошопе закруглениями и в css или плюсы и минусы какие-то?
Ответить
Вопрос некорректный. Сначала делается дизайн в фотошопе, потом делается вёрстка.
Ответить
Здравствуйте Михаил, не поможете ли вы мне решить следующую проблему - есть css код: input:not([type="radio"]), input:not([type="checkbox"]){width: 105%;} идея такая: все теги input кроме: type равный checkbox и radio получают заданную ширину. Но почему то заданную ширину получают все теги input. Помогите пожалуйста исправить данную проблему.
Ответить
Возможно, Ваш браузер не поддерживает CSS3 (а not это оттуда): http://myrusakov.ru/css-3.html
Ответить
А что тогда делать, что можно изменить, чтобы работало на всех браузерах?
Ответить
Использовать другие селекторы: http://myrusakov.ru/selektory-css.html - немного больше кода потребуется, но результат будет тот, что нужен.
Ответить
Спасибо!
Ответить
Можно сделать проще. В CSS блока нужно прописать border-radius: интересующее вас значение; Например border-radius: 6px;
Ответить
http://myrusakov.ru/css-3.html
Ответить
Уважаемый Михаил!!! Столкнулся с такой проблемой: IE не отображает "border-radius"/// в остальном кроссбраузерность нормальная. Даже кучу файлов htc перепробовал. Но увы, ничё не помогает. Может подскажите как решить проблемму с IE ( у меня 8-я версия ) ??? Заранее огромное спасибо
Ответить
В этой статье написано, как решить проблему. А border-radius - это CSS3, который, разумеется, в старых браузерах не работает.
Ответить
Одного не могу понять... Почему они вложены? Вообще не понял принцип.
Ответить
Пытаюсь сделать блок на сайте с прозрачным фоном и закруглёнными углами, пробовал стиль "opacity", но тогда прозрачные становятся все элементы страницы, сделал прозрачный однотонный рисунок ( background-repeat: repeat; получилась прозрачная заливка блока), сделал два прозрачных прямоугольных сектора (левый и правый угол). Сделал стиль как на Вашей этой странице, получилось два блока друг под другом. Немного изменил код, получилось расставить по углам блоки с углами. но как заполнить центр? не получается, вот мой код <body> <div class="div"> <div class="LL"></div> <div class="BG"></div> <div class="RR"></div> </div> </body> CSS стиль .div{ position: relative; /* Относительное позиционирование */ background-color: #0f0; height:350px; width: 350px; } .LL{ height: 40px; width: 40px; background: url(backgrWhiteLL40.gif) top left; /*путь к фоновой картинке*/ background-repeat: no-repeat; /*без повтора ресунка фона */ position: relative; } .BG{ position: relative; /*относительное позиционирование*/ background-image: url(backgrWhiteLL40.gif); /*путь к фоновой картинке*/ background-repeat: repeat; /*повтор ресунка фона */ margin: 20px 21px 22px 23px; /* Отступы вокруг блока */ } .RR{ position: absolute; /* Абсолютное позиционирование */ height: 40px; width: 40px; background: url(backgrWhiteRR40.gif); /*путь к фоновой картинке*/ background-repeat: no-repeat; /*без повтора ресунка фона */ top: 0; right: 0; } Подскажите пжлст, как поставить блок class="BG" между "LL" и "RR", и хотелось бы ширина блока была бы резиновая? Или может есть другой метод делать прозрачность только одного блока на странице?
Ответить
а почему бы просто не использовать заливку типа rgba у блока) проще,удобнее,разнообразнее,и прозрачным делает только блок. opacity же у блока,делает прозрачным и текст
Ответить
Спасибо, не знал об этом стиле.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.