Закругление углов контура свойства CSS
У меня есть этот элемент с добавлением этого стиля:
.checkout-step.current .number {
background-color: #d26d51;
outline: 1px solid #d26d51;
outline-offset: 4px;
}
Но мне не нужны квадратные углы в контуре, мне нужны круглые углы, как в этом примере:
Как я могу это сделать?
html css outlineПоделиться Источник Funny Frontend 30 июня 2015 в 09:40
3 ответа
- iPhoneOS SDK-удалить закругление углов из представлений (проблема iPad)
Это может быть немного придирчиво,но в настройке iPad SplitViewController есть 2 вида. Каждый из видов имеет очень маленькое закругление черного угла. (Вероятно, то же самое происходит и с приложениями iPhone). Это округление видно на рисунке ниже. Что я хотел бы сделать, так это удалить черное…
- Изменение вида контура Eclipse для файлов CSS
Как я могу заставить представление контура Eclipse выполнять любое из следующих действий при отображении контура для файла CSS: отображение комментария создайте сворачиваемый диапазон для группы правил CSS что-нибудь еще? Спасибо CLARIFICATION: Я не говорю о внесении изменений в код eclipse. Я…
4
Мой подход заключается в следующем. Пожалуйста, проверьте JSFiddle . Я добавил следующее HTML.
<a href="#">2</a>
Я добавил следующее css.
a {
background: #999;
width: 40px;
height: 40px;
border-radius: 20px;
text-decoration: none;
color: #fff;
display: inline-block;
line-height: 40px;
position: relative;
border: 2px solid #000;
text-align: center;
}
a:after {
content: '';
display: block;
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
border-radius: 30px;
border: 2px solid #f00;
}
Поделиться Harshal Sawant 30 июня 2015 в 10:03
Поделиться Richard Lindhout 30 июня 2015 в 09:56
-1
**use этот код **
контур мы не можем использовать свойство radius вместо контура make в качестве границы и радиуса, поэтому я изменил код, как это, Попробуйте это .
Html
<div><div>2</div></div>
css
.checkout-step.current .number {
background-color: #d26d51;
margin:15px;
}
.usecode
{
border:1px solid #d26d51;
border-radius:25px !important;
}
Похожие вопросы:
Использование контура для границ CSS
кто-нибудь еще использовал контур в CSS для создания двойных границ вместо вложенных divs? Каковы подводные камни использования контура в CSS, потому что я не кажусь очень популярным?? Овации
Удаление Контура Кнопки CSS
Я попробовал этот пример: удаление контура кнопки css, то есть 6.0, 7.0 … добавив outline:none; и border:none; , но это не решает проблему, как вы можете видеть здесь: http://jsfiddle.net/vVNGw /…
Jmagick закругление углов
У меня есть вопрос относительно Jmagick, как я могу закруглить углы изображения, и имеет ли это смысл или лучше сделать это с помощью CSS в HTML ? Спасибо
iPhoneOS SDK-удалить закругление углов из представлений (проблема iPad)
Это может быть немного придирчиво,но в настройке iPad SplitViewController есть 2 вида. Каждый из видов имеет очень маленькое закругление черного угла. (Вероятно, то же самое происходит и с…
Изменение вида контура Eclipse для файлов CSS
Как я могу заставить представление контура Eclipse выполнять любое из следующих действий при отображении контура для файла CSS: отображение комментария создайте сворачиваемый диапазон для группы…
Анимация CALayer из UIView для закругления углов
Я пытаюсь оживить закругление углов моего зрения. Свойство cornerRadius указано как анимируемое, но я, похоже, не могу заставить его работать. На самом деле я не могу получить ни одно из других…
css прозрачный сепаратор закругленных углов
У меня есть CSS проблема , как я достигаю css закругленных углов в качестве разделителей спасибо. некоторые-прозрачным.
CSS ширина контура не работает
Я пытаюсь установить ширину контура входного элемента в фокусе. Ширина контура остается неизменной (как будто это настройка по умолчанию, которая не может быть изменена), независимо от моей…
пользовательский вид-закругление углов прямоугольника, нарисованных линиями
Я играю с пользовательскими представлениями и хочу построить закругленный прямоугольник, используя методы path.lineTo() и path.arcTo() . Итак, прямоугольник, который я хочу получить: Обычно я рисую…
CSS Коробка Теней
Может ли кто-нибудь помочь мне с тем, что я делаю неправильно в коде CSS ниже, я хочу узнать, и я хочу сделать то, что есть на прилагаемом изображении. Инструкции таковы: Стили: ширина: 400 px,…
Как закруглить углы в CSS
Вы, конечно же, знаете, что в HTML-ле нет возможности создавать закругленные углы. Но необходимость в них велика. Поэтому верстальщики выдумали не один способ, чтобы закруглить угол, и самый простой и популярный из них, когда в крайние ячейки таблицы сайта помещались картинки углов.
По некоторым наблюдениям почти в 80% дизайнерских работ используются плавные линии. Закругленный угол тоже считается плавной линией. Получается, что визуальная мягкость и красота закругленного угла более востребована, нежели жесткость прямого угла, которая нужна лишь в определенных случаях.
К слову говоря, специалисты по дизайну жилых помещений считают, что закругленные углы помогают визуально расширить пространство комнаты. Пожалуй, этот визуальный фокус вполне применим и к сайтам.
Поэтому сегодня мы будем учиться закруглять углы при помощи CSS!
Для примера вот у нас есть такая кнопка:
Код кнопки (HTML):
<input type="button" value="Сообщение!"/>
Код кнопки (CSS):
.knopka
{
color:#cc0000;
font-size:50px;
padding:10px;
background-color:#fff;
border:1px solid #999;
}
Чтобы закруглить углы, пропишите в CSS «border-radius»:
border-radius: 20px;
готовый код:
<html>
<head>
<title>Заголовок страницы</title>
<style>
.knopka
{
color:#cc0000;
font-size:50px;
padding:10px;
background-color:#fff;
border:1px solid #999;
border-radius: 20px;
}
</style>
</head>
<body>
<input type="button" value="блог BlogGood.ru"/>
</body>
</html>
Результат будет таким:
Как видите, закруглились четыре угла на 20 px.
Если нужно закруглить, к примеру, только один, два или три угла, тогда нужно прописать к каждому углу параметры:
border-radius: 20px 20px 0 0;
Начинаете с левого верхнего угла и по часовой.
В результате вы увидите:
Закруглилось два верхних угла.
Если по каким-то причинам закругление не происходит, есть вероятность того, что ваш браузер ну очень сильно постарел…
Чтобы избежать такого, добавьте border-radius под популярные браузеры:
-moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius: 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ -icab-border-radius: 10px; /* Icab */ border-radius: 10px; /* CSS3 */
… и все заработает.
А сейчас парочка примеров того, что можно сотворить, используя закругление углов.
- Закругленная кнопка
Для CSS:.knopka2 { color:#fff; padding:10px; background-color:#008B00; border:1px solid #999; border-radius: 0 57px 0 57px; }Для HTML:
<input type="button" value="кнопка"/>
Результат:
- Закругление картинки
Результат:
- Анимированное закругление картинки (смотрите тут)
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: css, для сайта, основы
Закругление углов CSS
Одинаковый радиус для всех углов
Для того чтобы установить одинаковый радиус для всех углов блока нужно указать одно значение:
Чтобы радиус отображался в других браузерах, запись производится с дополнительными префиксами:
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
Префикс -moz записывается для отображения в браузере Firefox,
а –webkit, для Safari и Google Chrome.
HTML
<div>
</div>
CSS
.box{
width: 150px;
height: 150px;
border: 3px solid #444;
background-color: #fC0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
Одинаковые радиусы по диагонали
Свойство border-radius с двумя значениями отображает одинаковые радиусы по диагонали. Первое значение задаёт верхний левый и нижний правый радиус, а второе верхний правый и нижний левый.
-webkit-border-radius: 40px 20px;
-moz-border-radius: 40px 20px;
border-radius: 40px 20px;
1. Верхний левый и нижний правый – 40px
2. Верхний правый и нижний левый – 20px
HTML
<div>
</div>
CSS
.box{
width: 150px;
height: 150px;
border: 3px solid #444;
background-color: #fC0;
-webkit-border-radius: 40px 20px;
-moz-border-radius: 40px 20px;
border-radius: 40px 20px;
}
Два равных радиуса по диагонали и два по отдельности
У свойства border-radius с тремя значениями первый параметр отображает радиус верхнего левого угла, второй верхнего правого и нижнего левого, а третий нижнего правого.
-webkit-border-radius: 10px 40px 20px;
-moz-border-radius: 10px 40px 20px;
border-radius: 10px 40px 20px;
1. Верхний левый – 10px
2. Верхний правый и нижний левый – 40px
3. Нижний-правый – 20px
Каждый радиус задаётся в отдельности
Свойство border-radius с четырьмя значениями указывает на то, что каждое закругление угла задаётся по отдельности. Первое значение задаёт верхний левый радиус, второй верхний правый, третий нижний правый, четвёртый нижний левый.
-webkit-border-radius: 0px 10px 20px 40px;
-moz-border-radius: 0px 10px 20px 40px;
border-radius: 0px 10px 20px 40px;
1. Верхний левый – 0px
2. Верхний правый – 10px
3. Нижний правый – 20px
4. Нижний левый – 40px
Закругления блока с левой стороны
-webkit-border-radius: 20px 0px 0px 20px;
-moz-border-radius: 20px 0px 0px 20px;
border-radius: 20px 0px 0px 20px;
Закругления блока с правой стороны
-webkit-border-radius: 20px 20px 0px 0px;
-moz-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;
Закругления сверху
-webkit-border-radius: 0px 20px 20px 0px;
-moz-border-radius: 0px 20px 20px 0px;
border-radius: 0px 20px 20px 0px;
Закругления снизу
-webkit-border-radius: 0px 0px 20px 20px;
-moz-border-radius: 0px 0px 20px 20px;
border-radius: 0px 0px 20px 20px;
Круг из квадратного блока
Для того чтобы получился круг из квадратного блока ( это относится и к изображению ) нужно чтобы высота и ширина были одинаковы а значение свойства border-radius должно быть пятьдесят процентов.
HTML
<div>
</div>
CSS
.circle{
width: 150px;
height: 150px;
border: 3px solid #444;
background-color: #fC0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
Блок с закруглениями
Для того чтобы получить эллипс из квадратного элемента или картинки высота и ширина должны быть разными, а значение свойства border-radius должно составлять пятьдесят процентов.
HTML
<div>
</div>
CSS
.rounding{
width: 200px;
height: 100px;
background-color: #fC0;
border: 3px solid #444;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
Скругление углов CSS | Impuls-Web.ru
Приветствую вас, дорогие читатели!
Довольно часто, при верстке страниц, в зависимости от дизайна, появляется необходимость в скруглении углов блоков и изображений для придания странице более аккуратного вида. В сегодняшней статье я покажу вам, как это можно сделать с помощью CSS-свойств.
Навигация по статье:
Простое скругление углов CSS
Если у вас появилась такая необходимость вы можете воспользоваться стандартным CSS-свойством border-radius. Например:
.radius-block{ border-radius: 25px; }
.radius-block{ border-radius: 25px; } |
В данном случае для блока задается параметр для всех сторон.
Равномерное закругление
Варианты скругления углов CSS
Так же, можно задавать радиус для каждого отдельного угла. Например:
.radius-block2{ border-radius: 5px 15px 25px 35px; }
.radius-block2{ border-radius: 5px 15px 25px 35px; } |
Разное закругление
Как видите, принцип задания параметров скругления такой же, как и у других свойств, работающих для разных сторон блока (margin, padding и т.д.). Параметры задаются по часовой стрелке, начиная с левого верхнего. Таким образом, получается, что мы задали скругление для левого верхнего угла 5px, для правого верхнего – 15px, для нижнего правого — 25px, и для нижнего левого 35px.
Если вам нужно, к примеру, симметрично скруглить два противоположных угла по диагонали, то можно задать только два параметра:
.radius-block3{ border-radius: 5px 35px; }
.radius-block3{ border-radius: 5px 35px; } |
Симметричное закругление
В данном случае первый параметр работает для верхнего левого и правого нижнего, а второй – для верхнего правого, и нижнего левого.
Необычное скругление углов CSS
Еще у свойства border-radius есть одна интересная особенность. Вы можете задавать радиус скругления не только для какого-то конкретного угла, но и для вертикальной и горизонтальной половины угла.
Для этого нам нужно задать два параметра скругления через слеш. Например:
.radius-block4{ border-radius: 60px/25px; }
.radius-block4{ border-radius: 60px/25px; } |
Необычное закругление
Используя данный вариант можно даже элипс:
.radius-block5{ border-radius: 250px/75px; }
.radius-block5{ border-radius: 250px/75px; } |
Элипс
Благодаря использованию различных комбинаций скругления уголов CSS-стилями вы можете добиться очень интересных форм для блоков с контентом и кнопок для вашего сайта. Главное не перестараться:)
Если эта статья вам понравилась, и вы хотите меня поддержать, обязательно поделитесь ссылкой в социальных сетях и оставьте комментарий.
А на этом у меня сегодня все. Желаю вам успехов в экспериментах. До встречи в следующих статьях!
С уважением Юлия Гусарь
border-radius — закругленная рамка (скругление углов)
Поддержка браузерами
| 12.0+ | 9.0+ | 4.0+ | 5.0+ | 10.5+ | 5.0+ |
Описание
CSS свойство border-radius позволяет сделать закруглённую рамку или скруглить углы элемента. Значение свойства определяет радиус окружности. При использовании свойства, вместо отрисовки обычных прямых углов элемента, будет использоваться закруглённая рамка с закруглёнными углами согласно дуге окружности с заданным радиусом:
Свойство border-radius может содержать от одного до четырёх значений, разделяемых между собой пробелами. От количества значений зависит то, как будут установлены радиусы скругления углов. Если указывается более одного значения, скругление углов устанавливается начиная с верхнего левого угла:
|
|
|
|
|
|
|
Овальные скругления
CSS свойство border-radius также позволяет сделать скругление углов ввиде дуги овала, а не круга:
Чтобы определить овал используется комбинация из двух значений, между которыми ставится символ /:
border-radius: 50px / 30px;
Значение, расположенное слева от слэша, определяет горизонтальный радиус, значение справа – вертикальный радиус.
Каждая из двух частей (до слэша и после него) подчиняется тем же правилам, что и при создании круглых скруглений. Это означает, что каждая часть может содержать от одного до четырёх значений, разделяемых между собой пробелами. И от количества заданных значений будет зависеть то, как будут установлены радиусы скругления углов. Например, четыре значения перед символом / представляют горизонтальные радиусы для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. Значения после символа / соответственно представляют вертикальные радиусы для тех же самых углов.
Пример с овальными скруглениями:
|
Важно понимать, что форма элемента в любом случае остаётся прямоугольной. Поэтому, несмотря на то, что браузер отрисовывает закруглённые углы для элемента, содержимое элемента всё равно размещается в прямоугольной области и может выходить за границы скруглённых углов:
Примечание: если у элемента нет рамки, то браузер будет производить скругление углов для фоновой области.
| Значение по умолчанию: | 0 |
|---|---|
| Применяется: | ко всем элементам, кроме элемента table, когда для него установлено border-collapse: collapse; |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.borderRadius=»5px» |
Синтаксис
border-radius: [величина | проценты]{1,4} [ / [величина | проценты]{1,4} ]Значения свойства
| Значение | Описание |
|---|---|
| величина | Величина радиуса указывается в единицах измерения, используемых в CSS. |
| % | Величина радиуса, указанная в процентах, вычисляется в зависимости от общей ширины и высоты элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
div {
border-radius: 100px;
}
Закругление углов блоков и картинок в CSS
Благодарю компанию web-now.pro за помощь в разработке и запуске проекта POLITSECRETS.RU. Перед нами стояла задача – внедрить проект в сжатые сроки и по оптимальной цене. Порадовало то, что мне подроб…
Вера БлашенковаСекреты успешных выборов, Москва…
Мне очень понравился подход с которым нас встретили «Ваша задача заниматься бизнесом, наша — сделать Вам представительство в сети». После этого ребята разработали полное тз на проект, мы внесли пожела…
МаксимIT-TASK, Москва…
Работа проделана хорошо! Дизайнер и менеджер на отлично. Надеюсь на сотрудничество в дальнейшем. Есть шероховатости в деталях по задачам, но приятно сказывается оперативность и желание исправить, внес…
БруноСоциальная сеть След Жизни, Москва…
Работой остались очень довольны. К работе подходят ответственно, аккуратно, открыто. Проект был сдан чуть раньше срока, по ходу работы возникали изменения, все они принимались безоговорочно, работа вы…
ЕвгенийМагазин текстиля, Москва…
Сотрудничаем с 2007 года и сделали не один проект. Самое главное — команда умеет отстаивать своё мнение и постоянно развивается.
МарияМеждународные конференции, Москва…
Спасибо всему коллективу компании! Разработали красивый и что самое главной рабочий интернет магазин! Реклама настроена и запущена, продажи идут, бизнес развивается! Нам постоянно подсказывают о новых…
ВадимИнтернет магазин Aromatic.pro, Москва…
Большое спасибо команде за оперативность, качественные работы, отличный креатив и привлекательные цены!
Виктория, ОАО «Фармстандарт…
Здравствуйте уважаемые партнеры! С наступающим Новым Годом! Желаю Вам дальнейшего процветания и успехов в Вашей благородной работе! С вами приятно сотрудничать! Очень благодарен Вам за своевременное о…
Сергей ЮрченкоКинотруд, Москва…
Благодарим команду Brand Now и лично Дениса Логинова за оригинальное видение,разнообразие идей, четкость взаимодействия и безукоризненное соблюдение сроков выполнения проекта! Планируем продолжить сот…
ТатьянаBizness Linkerz…
Компания КУН выражает благодарность за сотрудничество: непростая задача была выполнена в требуемые сроки и полностью удовлетворила заявленному ТЗ. Приятно удивила готовность Генерального директора нач…
Мария, Компания КУНhttp://www.kuhn.com/…
Закругление углов в css: border-radius
В CSS появилась возможность, которая позволяет закруглять блоки или картинки с помощью свойства border-radius.
Свойство позволяет указывать величину закгургления и приминять не только закгругление со всех сторон, а также для конкретных сторон задавать нужные параметры.
Работа свойства очень просто, рассмотрим на примере:
| Код | Описание | Вид |
|---|---|---|
| div {border-radius: 10px;} | Радиус скругления для всех уголков сразу. | |
| div {border-radius: 0 10px;} | Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего. | |
| div {border-radius: 15px 10px 0; } | Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего. | |
| div { border-radius: 15px 10px 5px 0; } | Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего. |
Более подробное создание:
<!DOCTYPE HTML> <html lang="ru"> <head> </head> <body>Блок с загруглением 10px
</body> </html>
Результат:
Блок с загруглением 10px
закругленных углов | HTML Собака
Закругленные углы раньше использовались для сужения сплошных фоновых изображений или, для гибких рамок, множества фоновых изображений, по одному на каждый угол, наложенных на несколько вложенных элементов div . Ах, некрасиво. Ну, больше нет. Теперь, с помощью простого CSS, вы можете украсить свой дизайн большим количеством кривых, чем Мэрилин Монро.
Радиус границы?
Ага. Радиус границы. Но не бойтесь — вам не обязательно иметь границы.Свойство border-radius можно использовать для добавления угла к каждому углу блока.
#maryn {
фон: #fff;
ширина: 100 пикселей;
высота: 100 пикселей;
радиус границы: 20 пикселей;
}
Вот и все. Закругленные углы, понимаете? Хорошо, если у вас есть разумный браузер (см. Примечание ниже).
Углы вырезаются вокруг соответствующих четвертей круга (или эллипса) с заданным радиусом.Конечно, если вам нужна граница …
#ok_a_border_then {
граница: 5px solid # 8b2;
ширина: 100 пикселей;
высота: 100 пикселей;
радиус границы: 5 пикселей;
}
Woop.
Ссылка на нас! Если вы нашли HTML Dog полезным, рассмотрите возможность ссылки на нас.
Несколько значений
border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius также можно использовать для нацеливания на определенные углы.
Когда-либо менее ужасно многословный, вы также можете определить все угловые радиусы (какое замечательное слово) индивидуально с помощью списка значений, разделенных пробелами, работая по часовой стрелке от верхнего левого угла, как и другие сокращенные свойства:
#monroe {
фон: #fff;
ширина: 100 пикселей;
высота: 100 пикселей;
border-radius: 6px 12px 18px 24px;
}
Граничный радиус с несколькими значениями.Фигуристая.
Используя два значения вместо четырех, вы нацеливаете верхний левый и нижний правый на первую длину (или процент) и верхний правый + нижний левый на второй. Три ценности? Верхний левый, затем верхний правый + нижний левый, затем нижний правый. Разрушение.
Гах! Просто должны быть проблемы с браузером, не так ли? Будь вы прокляты, браузеры.
Internet Explorer версии 8 и ниже не поддерживает border-radius . Единственный способ справиться с этим — либо довольствоваться дизайном в тех браузерах, у которого нет закругленных углов (большинство людей могут с этим смириться), либо вернуться к старым фоновым изображениям.
Вы также можете наткнуться на похожие проприетарные свойства, такие как -webkit-border-radius и -moz-border-radius , которые предназначены для более старых, мало используемых версий Safari и Firefox соответственно. Наш тщательно сформулированный профессиональный совет? К черту их.
Эллипсы
Круги кажутся вам слишком квадратными? Вы можете указать разные радиусы по горизонтали и вертикали, разделив значения знаком «/».
#nanoo {
фон: #fff;
ширина: 100 пикселей;
высота: 150 пикселей;
радиус границы: 50 пикселей / 100 пикселей;
граница-нижний-левый-радиус: 50 пикселей;
граница-нижний-правый-радиус: 50 пикселей;
}
Наноо.| round-none | border-radius: 0px; |
| с закругленными углами | Радиус границы: 0,125 бэр; |
| закруглено | Радиус границы: 0,25 бэр; |
| закругленная | граница радиуса: 0,375 бэр; |
| закругленный lg | радиус границы: 0,5 бэр; |
| закругленный xl | радиус границы: 0,75 бэр; |
| закругленное 2xl | радиус границы: 1 rem; |
| закругленное 3xl | радиус границы: 1.5рем; |
| с закругленными краями | border-radius: 9999px; |
| закругленный т-нет | граница-верхний-левый-радиус: 0 пикселей; граница-верх-правый-радиус: 0 пикселей; |
| закругленный t-sm | граница-верхний-левый-радиус: 0,125 бэр; граница-верх-правый-радиус: 0,125 бэр; |
| закругленная | граница-верх-левый-радиус: 0,25 бэр; граница-верх-правый-радиус: 0,25 бэр; |
| закругленный t-md | граница-верх-левый-радиус: 0.375rem; граница-верх-правый-радиус: 0,375 бэр; |
| закругленный t-lg | граница-верхний-левый-радиус: 0,5 бэр; граница-верх-правый-радиус: 0,5 бэр; |
| закругленный-t-xl | граница-верхний-левый-радиус: 0,75 бэр; граница-верх-правый-радиус: 0,75 бэр; |
| закругленный-t-2xl | граница-верхний-левый-радиус: 1бэр; граница-верх-правый-радиус: 1 бэр; |
| закругленный-t-3xl | граница-верх-левый-радиус: 1,5 бэр; граница-верх-правый-радиус: 1.5рем; |
| закругленный-полный | граница-верх-левый-радиус: 9999 пикселей; граница-верх-правый-радиус: 9999 пикселей; |
| закругленный-r-none | border-top-right-radius: 0px; граница-нижний-правый-радиус: 0 пикселей; |
| закругленный-r-sm | граница-верх-правый-радиус: 0,125 бэр; граница-нижний-правый-радиус: 0,125 бэр; |
| с закругленными углами | граница, верхний правый радиус: 0,25 бэр; граница-нижний-правый-радиус: 0,25 бэр; |
| закругленный-r-md | граница-верх-правый-радиус: 0.375rem; граница-нижний-правый-радиус: 0,375 бэр; |
| round-r-lg | border-top-right-radius: 0.5rem; граница-нижний-правый-радиус: 0,5 бэр; |
| round-r-xl | border-top-right-radius: 0,75 rem; граница-нижний-правый-радиус: 0,75 rem; |
| закругленный-r-2xl | граница-верхний-правый-радиус: 1бэр; граница-нижний-правый-радиус: 1бэр; |
| закругленный-r-3xl | граница-верх-правый-радиус: 1,5 бэр; граница-нижний-правый-радиус: 1.5рем; |
| закругленный-полный | граница-верх-правый-радиус: 9999 пикселей; граница-нижний-правый-радиус: 9999 пикселей; |
| закругленный-б-нет | граница-нижний-правый-радиус: 0px; граница-нижний-левый-радиус: 0 пикселей; |
| закругленный-b-sm | граница-нижний-правый-радиус: 0,125 бэр; граница-нижний-левый-радиус: 0,125 бэр; |
| закругленный-b | край-нижний правый-радиус: 0,25 бэр; граница-нижний-левый-радиус: 0,25 бэр; |
| закругленный-b-md | граница-нижний-правый-радиус: 0.375rem; граница-нижний-левый-радиус: 0,375 бэр; |
| закругленный-b-lg | граница-нижний-правый-радиус: 0,5 бэр; граница-нижний-левый-радиус: 0,5 бэр; |
| закругленный-b-xl | граница-нижний-правый-радиус: 0,75 бэр; граница-нижний-левый-радиус: 0,75 бэр; |
| закругленный-b-2xl | граница-нижний-правый-радиус: 1бэр; граница-нижний-левый-радиус: 1бэр; |
| закругленный-b-3xl | край-нижний правый-радиус: 1,5 бэр; граница-нижний-левый-радиус: 1.5рем; |
| round-b-full | border-bottom-right-radius: 9999px; граница-нижний-левый-радиус: 9999 пикселей; |
| закругленный-l-нет | граница-верхний-левый-радиус: 0px; граница-нижний-левый-радиус: 0 пикселей; |
| закругленный l-sm | граница-верх-левый-радиус: 0,125 бэр; граница-нижний-левый-радиус: 0,125 бэр; |
| закругленное l | граница, верхний левый радиус: 0,25 бэр; граница-нижний-левый-радиус: 0,25 бэр; |
| round-l-md | граница-верх-левый-радиус: 0.375rem; граница-нижний-левый-радиус: 0,375 бэр; |
| закругленный l-lg | граница-верхний-левый-радиус: 0,5 бэр; граница-нижний-левый-радиус: 0,5 бэр; |
| закругленный-l-xl | граница-верх-левый-радиус: 0,75 бэр; граница-нижний-левый-радиус: 0,75 бэр; |
| закругленный-l-2xl | граница-верхний-левый-радиус: 1бэр; граница-нижний-левый-радиус: 1бэр; |
| закругленный-l-3xl | граница-верх-левый-радиус: 1,5 бэр; граница-нижний-левый-радиус: 1.5рем; |
| закругленный-l-полный | граница-верх-левый-радиус: 9999 пикселей; граница-нижний-левый-радиус: 9999 пикселей; |
| Round-TL-none | border-top-left-radius: 0px; |
| round-tl-sm | border-top-left-radius: 0.125rem; |
| закругленный tl | граница-верх-левый-радиус: 0,25 бэр; |
| Round-TL-MD | border-top-left-radius: 0,375 rem; |
| Round-TL-LG | border-top-left-radius: 0.5рем; |
| Round-TL-XL | border-top-left-radius: 0,75 rem; |
| Round-TL-2xl | border-top-left-radius: 1rem; |
| Round-TL-3xl | border-top-left-radius: 1.5rem; |
| Round-TL-Full | border-top-left-radius: 9999px; |
| закругленный tr-none | граница-верх-правый-радиус: 0px; |
| закругленный tr-sm | граница-верх-правый-радиус: 0.125rem; |
| закругленный-tr | граница-верх-правый-радиус: 0,25 бэр; |
| round-tr-md | border-top-right-radius: 0,375 rem; |
| round-tr-lg | border-top-right-radius: 0,5 бэр; |
| round-tr-xl | border-top-right-radius: 0,75 rem; |
| round-tr-2xl | граница-верх-правый-радиус: 1 rem; |
| round-tr-3xl | border-top-right-radius: 1.5рем; |
| закругленный-полный | граница-верх-правый-радиус: 9999 пикселей; |
| закругленный-br-none | граница-нижний-правый-радиус: 0px; |
| закругленный br-sm | граница-нижний-правый-радиус: 0,125бэр; |
| с закругленными углами | граница, нижний правый радиус: 0,25 бэр; |
| закругленный br-md | граница, нижний правый радиус: 0,375 бэр; |
| закругленный-br-lg | граница-нижний-правый-радиус: 0.5рем; |
| round-br-xl | border-bottom-right-radius: 0.75rem; |
| закругленный-br-2xl | граница-нижний-правый-радиус: 1бэр; |
| закругленный-br-3xl | граница-нижний-правый-радиус: 1,5 бэр; |
| закругленный-полный | граница-нижний-правый-радиус: 9999 пикселей; |
| закругленный-бл-нет | граница-нижний-левый-радиус: 0 пикселей; |
| закругленный-bl-sm | граница-нижний-левый-радиус: 0.125rem; |
| с закругленными углами | граница, нижний левый, радиус: 0,25 бэр; |
| round-bl-md | border-bottom-left-radius: 0.375rem; |
| round-bl-lg | border-bottom-left-radius: 0.5rem; |
| round-bl-xl | border-bottom-left-radius: 0.75rem; |
| закругленный-bl-2xl | граница-нижний-левый-радиус: 1бэр; |
| round-bl-3xl | border-bottom-left-radius: 1.5рем; |
| round-bl-full | border-bottom-left-radius: 9999px; |
CSS Закругленные углы и блоки тени CSS
Как нарисовать прямоугольник со скругленными углами?
Раньше многие веб-разработчики размещали изображения вместо закругленных углов , потому что по умолчанию границы прямоугольника указывали прямые углы. Но теперь свойство CSS3 border-radius позволяет веб-дизайнерам рисовать закругленные углы.
радиус границы: 25 пикселей;Сокращенное свойство border-radius можно использовать для одновременного определения всех четырех углов. Если какое-либо значение установлено равным нулю, этот угол будет квадратным.
Источник
Сокращенное свойство border-radius можно использовать для определения всех четырех углов одновременно, border-radius: 25px ;.
Вы можете указать разные значения в каждом углу поля.
div { граница: 5px сплошная # 4FFFA1; отступ: 30 пикселей; фон: # F6FFA1; ширина: 250 пикселей; граница-верх-левый-радиус: 0 пикселей; граница-верх-правый-радиус: 15 пикселей; граница-нижний-левый-радиус: 25 пикселей; граница-нижний-правый-радиус: 45 пикселей; }вывод
Закругленные углы CSS во всех браузерах
В Firefox вам нужно использовать префикс -moz-, который работает так же, как и стандартная версия CSS.
радиус границы: 20 пикселей; -moz-border-radius: 20 пикселейЧтобы установить разные радиусы для каждого отдельного угла коробки, используйте следующее:
-moz-граница-радиус-топлефт -moz-border-radius-topright -moz-граница-радиус-снизу-справа -moz-граница-радиус-нижний левыйЧтобы задать закругленных углов свойств во всех браузерах, вы можете реализовать следующее:
.box-corners { радиус границы: 30 пикселей; -moz-border-radius: 30 пикселей; //Fire Fox -webkit-border-radius: 30 пикселей; // Chrome / Safari -khtml-border-radius: 30 пикселей; // Браузеры Konquerer }
Как нарисовать круг с помощью CSS?
Скопируйте и вставьте следующий исходный код на свою html-страницу, он нарисует круг на вашей html-странице.
Круг
вывод
Как нарисовать затененный прямоугольник?
Свойство box-shadow CSS можно использовать для определения эффектов тени в элементе box.
Синтаксис:
box-shadow: цвет радиуса размытия x y;
- x — указывает расстояние по горизонтали справа от поля.
- y — указывает расстояние по вертикали над прямоугольником.
- blur — тень будет резкой, чем выше число, тем больше и светлее станет тень.
- radius — Положительные значения приведут к расширению тени и ее увеличению.
- color — цвет тени
пример
затененный ящик
Когда вы устанавливаете отрицательные значения в x и y, тень будет рисоваться слева и над рамкой.
div { граница: 5px сплошная # 4FFFA1; отступ: 30 пикселей; фон: # F6FFA1; ширина: 100 пикселей; box-shadow: -15px -15px бирюзовый; }В приведенном выше коде x и y установлены как отрицательные значения, поэтому тень будет рисоваться слева и над прямоугольником.
CSS Box Shadow с одной стороны
Вы можете нарисовать тень коробки с одной стороны, используя CSS
Тень на нижней стороне
Тень слева
Тень справа
Тень на верхней стороне
Чтобы установить свойства затененного окна во всех браузерах, вы можете реализовать следующее:
-moz-box-shadow -webkit-box-shadow тень коробкиborder-radius CSS полное руководство | Закругленные углы
Теория закругления углов заключается в том, что для их обработки требуется меньше когнитивных усилий.Скругление углов не только упрощает обработку, но и делает их более привлекательными для глаз. Идея заключается в том, что мы ассоциируем острые формы с опасностью, а более мягкие формы безопасны и безопасны. Смещение, стоящее за этим, известно как смещение контура, когда мы отдаем предпочтение объектам с контурами, а не объектам резкости.
Примером этого является знак «Стоп». Если вы можете представить (или найти) знак «Стоп», у него острые края, что не выглядит естественным, он выделяется на фоне более мягких органических, естественных форм.Вот почему, когда вы разрабатываете веб-сайты и приложения, сообщения об ошибках или сообщения, которые вы хотите, чтобы пользователь видел, должны быть отформатированы в прямоугольниках с острыми краями, но в тех случаях, когда вы хотите, чтобы пользователь сосредоточил внимание на контенте или сделал его более светлым, могут возникнуть закругленные углы. быть вашим лучшим вариантом.
Свойство border-radius можно использовать для создания закругленных углов элементов. Стоимость собственности может быть выражена в единицах длины или в процентах. Вы также можете анимировать радиус, используя функцию calc (), процентное значение или длину.
Свойство border radius является сокращением для border-top-left-radius, border-top-right-radius, border-bottom-left-radius и border-bottom-right-radius. Как и в случае с сокращением полей и полей, border-radius идет по часовой стрелке, начиная с верхнего левого угла, верхнего правого, нижнего левого и заканчивая нижним правым.
Примеры длинных рамок и радиусов
.round-box {
граница-верх-левый-радиус: 50%;
граница-верх-правый-радиус: 50%;
граница-нижний-левый-радиус: 50%;
граница-нижний-правый-радиус: 50%;
} Сокращенные примеры border-radius
Чтобы задать для всех 4 углов одинаковое значение, необходимо объявить одно значение:
.round-box {
радиус границы: 10 пикселей;
} Если в объявлении 3 значения, то первое значение задает верхний левый угол, второе значение — верхнее правое и нижнее левое, а третье значение — нижнее правое:
.round-box {
радиус границы: 10 пикселей 40 пикселей 80 пикселей;
} Чтобы установить одно и то же значение для верхнего левого и нижнего правого угла, а для верхнего правого и нижнего левого угла — разные значения, вы должны использовать два значения:
.round-box-two {
граничный радиус: 40% 0;
} Если вы хотите иметь закругленный круг, вы можете использовать радиус границы 50% на квадратном элементе, чтобы создать круг, например:
.round-box {
радиус границы: 50%;
} Если вы хотите иметь разные радиусы на каждом углу, вы можете сделать это:
.round-box {
радиус границы: 20 пикселей 40 пикселей 60 пикселей 80 пикселей
} Результатом будет:
- вверху слева: 20px
- верхний правый: 40 пикселей
- нижний правый: 60 пикселей
- нижний левый: 80 пикселей
Дополнительные значения по горизонтали и вертикали
В свойстве можно указать другое значение для горизонтального радиуса и вертикального радиуса.Как и в предыдущем случае, вы можете определять значения в пикселях (px) или процентах (%). Значения перед косой чертой задают значения по горизонтали, значения после косой черты — значения по вертикали.
.round-box {
радиус границы: 10 пикселей / 50 пикселей;
} вырезка
Иногда можно заметить, что цвет фона или содержимое выходит за пределы границы, если граница изогнута. Это можно предотвратить с помощью свойства background-clip:
.round-box {
радиус границы: 10 пикселей / 50 пикселей;
-moz-background-clip: отступы;
-webkit-background-clip: поле для заполнения;
фон-клип: padding-box
} Генератор радиуса границы
Существует онлайн-инструмент, который позволяет вам сгенерировать радиус границы.По умолчанию он добавляет префикс поставщика, но, как мы увидим дальше, вам может не понадобиться префикс поставщика.
Поддержка браузера
Браузер поддерживает border-radius, он поддерживается во всех основных браузерах (например, поддерживается вплоть до Internet Explorer версии 9) в течение многих лет и не требует никаких префиксов, таких как -webkit- и — моз-.
Ресурсы
Дополнительная литература
Это свойство можно использовать с другими свойствами, такими как граница и тень блока.Вот еще несколько руководств по CSS, которые вы можете прочитать:
Автор
МайкМайкл Гирон — старший дизайнер взаимодействия в Companies House в Кардиффе. Ранее Майк был дизайнером продуктов в GoCo Group, включая GoCompare, MyVoucherCodes и WeFlip. Также хорошо работает для таких брендов в Южном Уэльсе, как BrandContent и HEOR.
скруглений углов с использованием CSS3 | kirupa.com
— пользователем Кирупа | 27 марта 2011 г.
Каждые несколько лет в HTML или его связанных технологий, которые начинаются как крутые и модно.После массового злоупотребления это «что-то» оказывается быть презираемым и высмеиваемым. Этот цикл ухода от лести насмешки повторяются все время. Например, два дополнения, которые люди когда-то любили, но притворяются, что никогда не существовали, являются мигать и метки выделения. (Признай это — вы знаете, что когда-то их использовали! )
В CSS3 недавно появилась возможность указать закругленные углы. Я не говорю, что округлый углы будут чрезмерно использованы, что приведет к аналогичному люфту как и многие до этого, но это, безусловно, очень круто и модно сегодня! Вот тут-то и пригодится этот учебник.Этот урок научит вас быть крутым и модным. объясняя почти все, что нужно знать об использовании CSS для определения закругленных углов ваших элементов.
Что такое закругленные углы?
Прежде чем мы перейдем к деталям, давайте сделаем шаг назад и посмотрите, какие бывают закругленные углы. Ниже у вас есть прямоугольник:
[без округления ]
Если посмотреть на углы, то он очень острый. Это можно с уверенностью сказать, что этот прямоугольник не имеет закругленных углы.Это отличается от следующего прямоугольника:
[округление]
У этого прямоугольника определенно закругленные углы, но, говоря то, что у него «закругленные углы», все еще немного неточно из техническая точка зрения. Как мы можем определить округлость этого прямоугольника? Чтобы понять это, давайте увеличьте немного больше и внимательно посмотрите, что это закругленное Уголок в деталях выглядит:
Скругленность угла определяется радиусом овал, который он создает.В нашем примере радиус составляет 10 пикселей. по горизонтали и вертикали!
Итак … чтобы ответить на наш первоначальный вопрос, закругленный угол тот, который имеет ненулевой радиус. Могло ли это быть ответил более лаконично? Наверное.
Начало работы
Теперь, когда вы знаете, что такое закругленный угол, приступим. Помогать вы следуете, не стесняйтесь использовать следующий HTML:
Закругленные углы! 
Как видите, это очень простой документ, который только содержит div с изображением:
[изображение принцессы создано Дэниел Кук из LostGarden! ]
Если внимательно присмотреться к HTML, у div есть идентификатор . mainContent и одноименный селектор CSS. существует, чтобы изменить его внешний вид. Стили, которыми вы будете добавление будет жить внутри этого селектора!
Закругленные углы в CSS
В В CSS закругленные углы указываются через border-radius свойство, которое, в простейшем виде принимает значение, определяющее радиус округление:
радиус границы: 10 пикселей;
В строке выше я указываю радиус 10 пикселей, наносится на все углы.Следует отметить, что вы не обязательно использовать пиксели. Ты может использовать любую поддерживаемую единицу измерения , такую как em, pt, процент и т. д., чтобы определить округлость вашего угла.
Давайте продолжим и добавим это свойство в наш пример. В Селектор mainContent будет выглядеть следующим образом, когда добавлено свойство border-radius:
#mainContent {
цвет фона: # EFD6A6;
радиус границы: 10 пикселей;
отступ: 10 пикселей;
выравнивание текста: центр;
} После того, как вы добавили это свойство в mainContent, ваш При предварительном просмотре пример будет выглядеть следующим образом:
[ваш углы закруглены на 10 пикселей]
Я только что показал вам, как пользоваться сокращением версия этого свойства очень просто указать угловой радиус.
Вы можете иметь гораздо больший контроль, если хотите нырнем немного дальше. Например, вы можете указать разные угловые радиусы для каждого угла или настроить форму вашего сам уголок! Давайте теперь рассмотрим эти случаи.
Указание радиуса каждого угла Индивидуально
Вы можете указать индивидуальные значения для каждый угол, предоставив четыре значения вашему border-radius стенографическая собственность:
border-radius: 10px 3px 5px 2px;
Если вы используете эти значения, наш пример будет выглядеть как следует:
Четыре значения соответствуют в следующем порядке: вверху слева, верхний правый, нижний левый, нижний правый.Для наглядности можно выберите расширение свойства border-radius в его развернутые свойства и укажите радиус для каждого угла базис:
граница-верх-левый-радиус: 10 пикселей; граница-верх-правый-радиус: 3 пикселя; граница-нижний-левый-радиус: 5 пикселей; граница-нижний-правый-радиус: 2px;
Результат использования расширенных свойств тот же как сокращение, так что используйте ту форму, в которой вы больше удобно с.
Настройка самого угла
Ранее я показал пример того, как используется значение радиуса. для определения округлости угла:
Необязательно иметь радиусы по горизонтали и вертикали. быть таким же.Другими словами, вам не нужно углы на четверть идеального круга. Вы можете чередовать горизонтальный и вертикальный радиусы, чтобы перейти от кругового закругленный угол до овального:
В CSS это можно сделать, сначала осознав, что то, что вы указали ранее в качестве радиуса границы, соответствует к горизонтальному радиусу. Чтобы указать вертикальный радиус, при использовании сокращенного свойства border-radius вы добавляете косая черта (/) и эквивалентные вертикальные компоненты напрямую после горизонтального объявления:
border-radius: 10px 3px 5px 2px / 20px 1px 2px 1px;
Когда вы используете расширенные свойства border-radius, вертикальный радиус указывается сразу после горизонтального один:
граница-верх-левый-радиус: 10 пикселей 2 пикселя; граница-верх-правый-радиус: 3px 1px; граница-нижний-левый-радиус: 5px 2px; граница-нижний-правый-радиус: 2px 3px;
Вот и все, что нужно для настройки округлости угол!
Другие способы представления округлых Углы
В предыдущих разделах я рассмотрел сокращенные и расширенные варианты указания border-radius свойство.В этом разделе давайте посмотрим на некоторые другие (допустимые) способы просмотра того же CSS.
Начнем с этого:
border-radius: 10px 2px;
Когда вы указываете только два значения, первое значение соответствует верхнему левому и нижнему правому углам, а второе значение соответствует нижнему левому и верхние правые углы:
Связь между двумя значениями и углами они соответствуют согласованно при указании также вертикальный радиус:
border-radius: 10px 3px 5px 2px / 20px 1px;
В этом примере вертикальный радиус левого верхнего и нижний правый угол составляет 20 пикселей.Вертикальный радиус нижний левый и верхний правый углы — 1 пиксель.
Последнее, что мы собираемся рассмотреть, — это то, что происходит. при указании трех значений:
border-radius: 10px 2px 20px;
В этом случае ваш браузер обработает недостающую четвертую значение как такое же, как и второе значение! Верхний левый соответствует первому значению, верхний правый угол соответствует второе значение, нижний левый угол соответствует третьему значению, а нижний правый соответствует второе значение.В этом есть смысл, правда?
Заключение
Вот и все нужно узнать о закругленных углах в CSS. Вы можете используйте свойство border-radius, чтобы скруглить углы почти все элементы. Я упоминаю «почти», потому что, согласно для W3C, это не работает с таблицами, чьи border-collapse настроен на свертывание.
Есть вопрос или просто хотите поболтать? Прокомментируйте ниже или загляните на наши форумы (на самом деле это одно и то же!), Где кучка самых дружелюбных людей, с которыми вы когда-либо столкнетесь, будут рады помочь вам!
Когда Кирупа не занят тем, что пишет о себе от третьего лица, он практикует социальное дистанцирование… даже в своих профилях в Twitter, Facebook и LinkedIn.
Hit Подпишитесь, чтобы получать полезные советы, уловки, селфи и многое другое, лично доставленное на ваш почтовый ящик.
CSS Border Radius Generator — CSS Portal
Радиус границы Свойство
Свойство CSS border-radius позволяет создать закругленную границу или скруглить углы элемент. Значение свойства определяет радиус круга. При использовании собственности, вместо рисования обычных правых углов элемента скругленная рамка со скругленными углами будет использоваться по дуге окружности с заданным радиусом:
Инжир.1 — Пример окружности с граничным радиусом.Свойство CSS border-radius может содержать от одного до четырех значений, разделенные пробелами. Количество значений определяет способ задания радиусов скругления углов. Если указано более одного значения, скругление углов устанавливается, начиная с верхнего левого угла:
1 Значение:
Пример: div { border-radius: 10px; }
Первое значение — Устанавливает радиус для всех углов блока.
2 Значения:
Пример: div { border-radius: 10px 20px; }
Первое значение — Устанавливает радиус для верхнего левого и нижнего правого углов блока.
Второе значение — Устанавливает радиус для верхнего правого и нижнего левого углов блока.
3 Значения:
Пример: div { border-radius: 10px 20px 5px; }
Первое значение — Устанавливает радиус закругления верхнего левого угла блока.
Второе значение — одновременно задает радиус для верхнего правого и нижнего левого углов блока.
Третье значение — Устанавливает радиус нижнего правого угла блока.
4 Значения:
Пример: div { border-radius: 10px 20px 5px 40px; }
Первое значение — Устанавливает радиус верхнего левого угла блока.
Второе значение — Устанавливает радиус верхнего правого угла блока.
Третье значение — Устанавливает радиус нижнего правого угла блока.
Четвертое значение — Устанавливает радиус нижнего левого угла блока.
В дополнение к свойству border-radius вы также можете установить радиус каждого угла блока отдельно, используя следующие свойства CSS:
Свойство border-radius также позволяет округлять углы в виде овальной дуги, а не круг:
Инжир.2 — Пример эллипса с граничным радиусом.Для определения овала используется комбинация двух значений, разделенных символом /:
радиус границы: 20 пикселей / 35 пикселей; Значение слева от косой черты определяет горизонтальный радиус, а значение справа определяет вертикальный радиус.
Каждая из двух частей (до и после косой черты) следует тем же правилам, что и при создании круглый радиус. Это означает, что каждая часть может содержать от одного до четырех значений, разделенных символом пробелы.И количество указанных значений будет определять, как устанавливаются угловые радиусы. Для Например, четыре значения перед символом / представляют горизонтальные радиусы левого верхнего угла, верхний правый, нижний правый и нижний левый углы. Значения после символа / соответственно представляют вертикальные радиусы для тех же углов.
Пример: div { border-radius: 25px / 10px; }
Первое значение — Устанавливает радиус горизонтального радиуса каждого угла блока.
Второе значение — Устанавливает радиус вертикального радиуса каждого угла блока.
Использованные ссылки на CSS
Онлайн-класс по основам CSS: округление углов
19.10 Закругление углов
- Назначьте закругленные углы различным элементам макета: main, header { -webkit-border-radius: 9 пикселей; -moz-border-radius: 9 пикселей; радиус границы: 9 пикселей; } #left_column, #main_navi, основной а.окно ссылок, aside article { -webkit-border-radius: 7 пикселей; -moz-border-radius: 7 пикселей; радиус границы: 7 пикселей; } в сторону статьи h2 { -webkit-border-radius: 3 пикселя; -moz-border-radius: 3 пикселя; радиус границы: 3 пикселя; } main a.linkbox span { -webkit-border-radius: 5 пикселей; -moz-border-radius: 5 пикселей; радиус границы: 5 пикселей; }
Готово
Выборочное определение углов
К сожалению, мы только что создали проблему в наших основных разделах навигации и субнавигации: сами элементы nav имеют закругленные углы, а элементы списка внутри них — нет.Это заставляет их выступать из коробки.
Поэтому нам нужно назначить закругленные углы и отдельным элементам списка — но не всем, только первому и последнему — и даже там, не всем четырем углам, а только двум.
Первую задачу (выбрав только первый и последний элемент списка) решим, используя наши : first-child и : last-child псевдоэлементы. Мы уже есть некоторые из этих селекторов.
Для второй проблемы (округление только двух углов) CSS дает нам возможность определить радиус границы только для выбранных углов.Официальный синтаксис для этого:
граница-верх-левый-радиус граница-нижний-левый-радиус граница-верх-правый-радиус border-bottom-right-radiusСинтаксис Safari аналогичен:
-webkit-border-top-left-radius -webkit-border-нижний левый-радиус -webkit-border-top-right-radius -webkit-border-bottom-right-radiusТолько в Firefox вам нужно определить различные свойства :
-moz-граница-радиус-топлефт -moz-граница-радиус-нижний левый -moz-border-radius-topright -moz-граница-радиус-снизу-справа- Перейдите к соответствующим селекторам для элементов списка и выборочно определите ваши углы (по общему признанию, это довольно трудоемкая задача): #main_navi ul li: first-child { -webkit-border-top-left-radius: 7 пикселей; -webkit-border-нижний левый-радиус: 7 пикселей; -moz-border-radius-topleft: 7 пикселей; -moz-border-radius-bottomleft: 7 пикселей; граница-верх-левый-радиус: 7 пикселей; граница-нижний-левый-радиус: 7 пикселей; } #main_navi ul li: last-child { -webkit-border-top-right-radius: 7 пикселей; -webkit-border-bottom-right-radius: 7px; -moz-border-radius-topright: 7 пикселей; -moz-border-radius-bottomright: 7 пикселей; граница-верх-правый-радиус: 7 пикселей; граница-нижний-правый-радиус: 7 пикселей; } #left_column ul li: first-child { -webkit-border-top-left-radius: 7 пикселей; -webkit-border-top-right-radius: 7 пикселей; -moz-border-radius-topleft: 7 пикселей; -moz-border-radius-topright: 7 пикселей; граница-верх-левый-радиус: 7 пикселей; граница-верх-правый-радиус: 7 пикселей; } #left_column ul li: last-child { -webkit-border-нижний левый-радиус: 7 пикселей; -webkit-border-bottom-right-radius: 7px; -moz-border-radius-bottomleft: 7 пикселей; -moz-border-radius-bottomright: 7 пикселей; граница-нижний-левый-радиус: 7 пикселей; граница-нижний-правый-радиус: 7 пикселей; }
Готово
Готово!
.