Закругленные углы с помощью радиуса округления границ рамки CSS3
До появления CSS3, чтобы добавить к таким элементам веб-страницы, как формы или кнопки, закругленные углы, нужно было использовать ряд изображений и много дополнительной разметки. К счастью, теперь закругленные углы CSS позволяет создавать очень просто. В том числе это можно сделать с помощью свойства border-radius.
Вы можете использовать это свойство CSS3 для следующих браузеров:
- Chrome 6+;
- Firefox 4+;
- Safari 5 +;
- IE9 +;
- Opera 10.5+;
- Android 2.1+;
- iOS 3.1+.
Мы будем работать с классом «info-box«. Это может быть область вашей веб-страницы с контактной информацией, и вы хотите с помощью CSS закруглить углы.
Напишите HTML-код элемента, для которого вы хотите закруглить углы:
<div>Здесь будет какой-то контент</div>
Далее добавьте в таблицу стилей правило CSS:
.info-box {
-webkit-border-radius: 20px;
border-radius: 20px;
background-color: #000000;
{Примечания:
Мы добавили как вендорную версию свойства, так и обычную. Мы также добавляем цвет фона. Чтобы радиус округления углов рамки отображался должным образом, фон элемента должен отличаться от фона области, в которой размещается элемент. Иначе нужно будет добавить стили, ширину и цвет рамки.
Перед тем, как сделать закругленные углы CSS, нужно отметить, что в приведенном примере все четыре угла рамки будут иметь один и тот же радиус (20 пикселей).
Вы также можете создавать панели с закругленными углами, которые отличаются друг от друга. Это можно сделать, добавив для свойства CSS несколько значений. С помощью сокращений CSS их можно указать в одну строку. Порядок присвоения значений: верхний левый угол, верхний правый, нижний правый, нижний левый:
.info-box {
-webkit-border-radius: 20px 60px 40px 30px;
border-radius: 20px 60px 40px 30px;
background-color: #000000;
{ Еще один эффект, который вы можете создать с помощью этого свойства, это круглые изображения. Если у вас есть изображение, которое имеет идеальную квадратную форму, то можно с помощью CSS закруглить углы картинки, и тогда рамка «обрежет» края изображения и создаст идеальный круг.
Допустим, что у вас в HTML-разметке есть квадратное изображение, которое имеет класс «bio-pic«. Вы можете сделать это изображение круглым с помощью следующего CSS-кода:
img.bio-pic {
-webkit-border-radius: 50%;
border-radius: 50%;
{В этом случае не нужно задавать цвет фона или цвет границы, потому что вы добавляете эти стили к изображению эффект закругленных углов будет работать, так как изображение будет отличаться от цвета фона, на котором оно расположено.
Данная публикация представляет собой перевод статьи «Rounded Corners with CSS3 Border Radius» , подготовленной дружной командой проекта Интернет-технологии.ру
Закруглённые углы на CSS3.
Вы здесь: Главная — CSS — CSS3 — Закруглённые углы на CSS3.
Привет всем и сегодня мы разберём свойство border-radius, которое позволяет сделать закруглённые уголки для любых блочных элементов на странице.
Для начала создадим простенькую html разметку
<html>
<head>
<title>border-radius</title>
<meta charset="utf-8">
</head>
<body>
<div></div>
</body>
</html>
Теперь зададим базовые стили для нашего блока.
.block {
width: 200px;
height: 200px;
margin: 20px;
background: #777;
}
Вот, что мы имеем сейчас
Давайте скруглим углы блока на 10px
.block {
width: 200px;
height: 200px;
margin: 20px;
background: #777; border-radius: 10px;
}
Чтобы скруглить все углы, мы добавили свойство border-radius с единственным значением 10px, но мы можем задать для каждого угла своё скругление. Для этого просто перечислим 4 значения для верхнего левого, верхнего правого, нижнего правого и нижнего левого угла.
.block {
width: 200px;
height: 200px;
margin: 20px;
background: #777; border-radius: 10px 20px 30px 40px;
}
Как видно из скриншота, все углы у нас теперь с разным скруглением. Мы можем также рассписать свойства для каждого угла отдельно
.block {
width: 200px;
height: 200px;
margin: 20px;
background: #777; border-top-left-radius: 10px; // верхний левый угол
border-top-right-radius: 20px; // верхний правый угол
border-bottom-right-radius: 30px; // нижний правый угол
border-bottom-left-radius: 40px; // нижний левый угол
}
«Зачем это нужно, если у нас есть сокращённая форма?» — Чтобы ответить на этот вопрос, давайте рассмотрим пример
.block {
width: 200px;
height: 200px;
margin: 20px;
background: #777; border-bottom-right-radius: 20px 40px;
}
Как видно из скриншота, наш правый нижний угол закруглён неравномерно. Т.е. по вертикали угол закруглился на 40px, а по горизонтали на 20px. Данный способ используется, когда вам нужно сделать какую-нибудь очень сложную фигуру на CSS, в остальных случаях вполне хватает сокращённой формы.
И последнее: вы можете указывать радиус закругления не только в пикселях, но и в процентах. Например, давайте сделаем идеальный круг. Для этого зададим всем углам радиус скругления 50%
.block {
width: 200px;
height: 200px;
margin: 20px;
background: #777; border-radius: 50%;
}
-
-
Михаил Русаков
Михаил РусаковКопирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
38 статей о создании закругленных углов на сайтах / Habr
Моя статья на Временно.нетЧасто сталкиваешься с необходимостью создания блоков с круглыми краями. Задавшись вопросом как вообще можно решить поставленную задачу, сделал подборку интересных статей и уроков на данную тему.
Простой, семантически правильный CSS блок с чистым кодом
Создает блок и добавляет возможность создания заголовка блока. Тянется по ширине и высоте. Несмотря на тень на примере, реализации полупрозрачной тени не предусмотрено.
Круглые углы в CSS
Очень приятный внешний вид, простая реализация, малое количество HTML-элементов. К минусам, пожалуй, можно отнести только наличие 4 картинок для каждого из углов. Но увы не работает в IE.
CSS тизер-блок
Предусмотрена реализация как одно- так и двух-картиночного метода. Малое количество HTML-элементов. Очень удобно для создания тизеров.
Ссылки на последние новости
Очень интересное решение на основе неупорядоченного списка. Плюсом будет простая реализация и малое количество HTML-элементов. Приятное оформление с функцией изменения цвета при наведении мышкой (но эта приятность не работает в IE).
CSS и круглые углы: Границы с дугами
Неоспоримым минусом является наличие 8 дивов для реализации. Так же в статье есть описание другого метода, в котором используется в 2 раза меньше дивов, но блок залит цветом.
Озаглавленные сверху углы
Реализовано на основе списков определений. Достаточно красивое оформление, возможность создания заголовка. Отсутствует поддержка изменения ширины. Но есть удобная возможность быстрого изменения цвета заголовков и самого блока.
Создание скругленного блока или дизайн с CSS и XHTML
Как и в предыдущем способе все реализовано на основе списка определений. В статье рассмотрено два способа реализации. Так же появилась возможность тянущейся ширины.
Резиновый блок с легко изменяемыми углами и поверхностью
Минусами в этом способе так же является большое количество дивов (5) и 4 файлов картинок. Но есть интересные примеры для реализации.
Закругленные углы бордера
Не является полным уроком, но показывает принцип использования единичного бордера и картинки.
Круглые угла в CSS
Достаточно приятный урок. Его минусом, пожалуй, является относительно большое количество HTML-элементов и наличие 4 картинок для каждого из углов.
Создание произвольных углов и границ
Используется 4 файла с картинками (максимальная ширина блока зависит от ширины картинки). Но очень подробный урок.
«Пуленепробиваемые» круглые углы
Очень подробная статья с большим количеством примеров. Но достаточно сложная реализация. К тому же используется 4 картинки.
Рисование теней и рамок элементов оформления
Статья Владимира Токмакова. Весьма сложная реализация, но к плюсам, конечно, относится возможность создания полупрозрачных теней. Статья на русском.
Круглые углы с фиксированной шириной
Интересный пример использования. Но минус в фиксированной ширине данного способа. Плюс — очень простая реализация.
CSS тянущийся блок с 4 произвольными углами
Вполне хороший урок. Возможность отбрасывания теней. Плюс — возможность создания заголовков.
Делаем закругленные уголки с помощью псевдоэлементов :before и :after
Статья уже была описана на Хабре. Очень простая реализация, но не все примеры, приведенные в статье, работаю в IE. Используется 4 файла с картинками для реализации. Статья на русском.
Создание произвольных углов и границ. Часть II
Описывается способ при котором фон не сплошной, а градиентный. Используется 4 картинки.
Круглые углы в DIVах
Описано 3 способа реализации. Таблицами, дивами и дивами без картинок. Последний вариант не очень хорош, так как используется много пустых тэгов.
Круглые углы и блоки с тенью
Пожалуй, не очень хороший способ, так как используется 5 картинок. Но вроде бы предусмотрена возможность создания тени. Плюс — использование только двух HTML-элементом.
Занимательная верстка
Статья на Хабре, в которой хабражители пытаются предложить свои варианты решения. Статья на русском.
Еще больше круглых углов с CSS
Приятная на внешний вид техника, но жаль, что нет реализации PNG под IE.
CSS резиновые круглые углы
Использует по два пустых тега на верх и низ блока. К минусам относится 6 картинок для реализации.
CSS: Умные углы
Использует один пустой для верха и два для низа. Вполне приятная реализация.Как сделать тянущиеся по ширине divы с круглыми краями
Вроде бы и с PNG, но опять же в IE не работает. В качестве плюсов можно назвать урок по рисованию круглых краев 🙂Тянущиеся круглые углы
Большая подробная статья с большим количеством картинок. Но на каждый угол по диву, плюс див для контента.Закругление углов без использования изображений
Способ безкартиночного создания закругленных углов. Но много пустых элементов(способ, аналогичный блокам GMail).Представление DomCorners
В статье есть несколько вариаций на тему количества используемых изображений. Минус в использовании пустых тэгов.Прозрачные произвольные углы и границы. Версия 2
Приятный пример использования. Красивое оформление. Отбрасывание полупрозрачных теней, но тени не работают в IE.Nifty углы со сглаживанием
В своем роде является добавление к скрипту Nifty Corners. Не использует изображений. Можно изменять радиус скругления как по оси X так и по Y.Круглые углы
Очень простая реализация, всего один элемент div. Так же в комментариях много дополнений.www.curvycorners.net
Отдельный сайт посвященный круглым углам. Красивые примеры использования. Очень простая реализация и много возможностей настройки.Nifty Corners Cube
Очень популярный скрипт, позволяющий создать круглые углы без изображений. Очень много вариантов реализации.RUZEE.Borders — круглые углы с помощью яваскрипта
Достаточно большое количество возможностей. Так же основан на Nifty. Возможность создавать тень, но не работает в IE.jQuery скругление
Пожалуй самый большой выбор всевозможных углов. Малое количество HTML-элементов для реализации.RoundedCornr
Большое количество возможностей. Генерирует 4 типа блоков, в том числе и кнопки. Единственный минус в наличие пустых тегов в генерируемом коде.Spiffy Corners
Очень простой генератор. Но генерирует очень большое количество элементов.Spanky Corners 1.1
Простой генератор с хорошим HTML-кодов, плюс генерирует отдельный css-файл для IE.Spiffy Box
Генерирует одну png-картинку с заданными параметрами. К плюсам можно отнести простой HTML-код. Так же в статье есть ссылка на урок, по которому создан генерируемый код.
Закругление углов при помощи CSS
CSS-свойство border-radius позволяет закруглять углы любого блока. Блок может быть с бордером, либо фоновым рисунком — в любому случае border-radius сделает вам круглые углы без дополнительных рисунков, как это делалось раньше. Рассмотрим как его правильно использовать.
Свойство border-radius имеет несколько вариантов записи. Самый простой вариант — указывание одного радиуса скругления.
CSS
border-radius: 5px;
Указанный радиус будет применен ко всем четырем углам блока.
Можно задать свой радиусы скругления для каждого угла:
CSS
border-radius: 5px 4px 3px 6px;
Порядок в этом случае стандартный для CSS: первый задает радиус верхнего левого угла, а остальные по часовой стрелке.
Если же вы хотите контролировать радиус скруглений каждого угла в отдельности, то допускаются и так называемые «longhand» свойства:
CSS
border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;
Не менее интересна в border-radius возможность задавать эллиптические углы. В этом случае закругление каждого угла задается парой значений: горизонтальный и вертикальный радиусы.
При использовании border-radius следует помнить, что он задает горизонтальную и вертикальную полуоси внешней дуги границы. Поэтому для толстых бордеров радиус внутреннего скругления получается по формуле border-radius минус border-width. Если получается отрицательное число, то внутренний радиус равен нулю. Что можно видеть на следующих рисунках:
На верхнем рисунке толщина границы больше радиуса скруглений. в результате внутри мы имеем прямой угол. На нижнем же рисунке, толщина границы больше border-radius на 20 пикселей. в результате радиус внутренней дуги границы равен 20px.
Стоит также отметить, что border-radius успешно работает и в случае если задан фоновый рисунок (либо цвет) для блока. В этом случае углы будут закругленны даже если отсутствует border.
Все было бы хорошо, если бы не одно НО. В чистом виде border-radius поддерживают не все браузеры. Однако для некоторых браузеров имеются свои аналогичные свойства.
CSS
.class {
border-radius: 10px; /* свойство для тех кто его поддерживает */
-moz-border-radius: 10px; /* для firefox */
-webkit-border-radius: 10px; /* для Safari и Chrome */
}
Работают они аналогично стандартному border-radius.
htmlworld.ru
Закругленные углы таблицы Только CSS
Во-первых, вам нужно больше, чем просто, -moz-border-radiusесли вы хотите поддерживать все браузеры. Вы должны указать все варианты, в том числе простые border-radius, следующим образом:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
Во-вторых, чтобы напрямую ответить на ваш вопрос, на border-radius
Чтобы включить границу и, таким образом, получить закругленные углы, вам также нужен borderатрибут для ваших tdи thэлементов.
td, th {
border:solid black 1px;
}
Вы также увидите закругленные углы, если у вас есть фоновый цвет (или графический), хотя, конечно, для окружающего элемента должен быть другой цвет фона, чтобы закругленные углы были видны без рамки.
Стоит отметить, что некоторым старым браузерам не нравится размещать border-radiusтаблицы / таблицы. Возможно, стоит поместить <div>внутри каждой ячейки и стилировать это. Однако это не должно влиять на текущие версии любых браузеров (кроме IE, которые вообще не поддерживают закругленные углы — см. Ниже)
Наконец, не то, что IE вообще не поддерживает border-radius(IE9 beta делает, но большинство пользователей IE будут на IE8 или меньше). Если вы хотите взломать IE для поддержки граничного радиуса, посмотрите http://css3pie.com/
[РЕДАКТИРОВАТЬ]
Ладно, это меня подтолкнуло, поэтому я провел некоторое тестирование.
Вот пример JSFiddle, с которым я играл
Кажется, что критическая вещь, которую вы отсутствовали, была border-collapse:separate;на элементе таблицы. Это препятствует соединению ячеек между их границами, что позволяет им получить радиус границы.
Надеюсь, это поможет.
Автор: Spudley Размещён: 08.02.2011 11:09