Закругление рамки
Если в .Ramka нет padding , то рамка таблицы будет перекрывать заокруглённые уголки блока, содержащего эту таблицу.
25 июл 2012 в 13:36
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Привет. Посоветую в стилях прописать overflow и display , т.е. примерно получиться должно так:
Border-Radius .ramka asdasdasdsad
Надеюсь, это поможет решить ваш вопрос. 🙂
Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
ответ дан 24 июл 2012 в 23:54
406 2 2 серебряных знака 7 7 бронзовых знаков
25 июл 2012 в 6:10
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
border-radius
CSS свойство border-radius позволяет сделать закруглённую рамку или скруглить углы элемента. Значение свойства определяет радиус окружности. При использовании свойства, вместо отрисовки обычных прямых углов элемента, будет использоваться закруглённая рамка с закруглёнными углами согласно дуге окружности с заданным радиусом:
Свойство border-radius может содержать от одного до четырёх значений, разделяемых между собой пробелами. От количества значений зависит то, как будут установлены радиусы скругления углов. Если указывается более одного значения, скругление углов устанавливается начиная с верхнего левого угла:
- border-radius: 5px 10px 15px 20px; (4 значения)
- Верхний левый – 5px
- Верхний правый – 10px
- Нижний правый – 15px
- Нижний левый – 20px
- border-radius: 10px 20px 15px; (3 значения)
- Верхний левый – 10px
- Верхний правый и нижний левый – 20px
- Нижний-правый – 15px
- border-radius: 15px 5px; (2 значения)
- Верхний левый и нижний правый – 15px
- Верхний правый и нижний левый – 5px
- border-radius: 13px; (1 значение)
- Радиус для всех четырёх углов – 13px
Овальные скругления
CSS свойство border-radius также позволяет сделать скругление углов ввиде дуги овала, а не круга:
Чтобы определить овал используется комбинация из двух значений, между которыми ставится символ / :
border-radius: 50px / 30px;
Значение, расположенное слева от слэша, определяет горизонтальный радиус, значение справа – вертикальный радиус.
Каждая из двух частей (до слэша и после него) подчиняется тем же правилам, что и при создании круглых скруглений. Это означает, что каждая часть может содержать от одного до четырёх значений, разделяемых между собой пробелами. И от количества заданных значений будет зависеть то, как будут установлены радиусы скругления углов. Например, четыре значения перед символом / представляют горизонтальные радиусы для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. Значения после символа / соответственно представляют вертикальные радиусы для тех же самых углов.
Пример с овальными скруглениями:
- border-radius: 55px 45px 40px / 35px 20px;
- Верхний левый – 55px / 35px
- Верхний правый и нижний левый – 45px / 20px
- Нижний правый – 40px / 35px
Важно понимать, что форма элемента в любом случае остаётся прямоугольной. Поэтому, несмотря на то, что браузер отрисовывает закруглённые углы для элемента, содержимое элемента всё равно размещается в прямоугольной области и может выходить за границы скруглённых углов:
Примечание: если у элемента нет рамки, то браузер будет производить скругление углов для фоновой области.
| Значение по умолчанию: | 0 |
|---|---|
| Применяется: | ко всем элементам, кроме элемента table, когда для него установлено border-collapse: collapse; |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.borderRadius=»5px» |
Синтаксис
border-radius: [величина | проценты] [ / [величина | проценты] ]
Значения свойства
| Значение | Описание |
|---|---|
| величина | Величина радиуса указывается в единицах измерения, используемых в CSS. |
| % | Величина радиуса, указанная в процентах, вычисляется в зависимости от общей ширины и высоты элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Как сделать закругленные углы CSS: описание + CSS генераторы
Решил на своем сайте стандартным блокам в сайдбаре сделать закругленные углы с помощью CSS3. Раньше, помнится, чтобы реализовать данную задачу рисовали отдельные картинки для каждого угла и совмещали их с помощью нескольких DIV блоков в HTML. К счастью, сейчас все это легко задается в CSS стилях. Для определенных макетов и тематик (например, женской) подобное CSS закругление выглядят намного интереснее прямых строгих линий.
В общем, пришлось детально разбираться с вопросом, узнавать, что за свойство такое border-radius, какие параметры в нем можно указывать и т.п. Для упрощения задачи даже нашел специальные сервисы генераторы закругленной рамки на CSS. Обо всем этом я вам сегодня и расскажу.
Свойство border-radius
Для создания круглых блоков используется CSS свойство border-radius. Фактически оно задает радиус закругления рамки элемента. Если у него нет рамки, то применяется для фона. Работает также и с фоновой картинкой.
Код для элементов на скриншоте выше:
> > > ="utf-8"> >Border-radius> > div { float: left; margin: 10px; padding: 20px; width: 170px; height: 130px; } #rcorners1 { border-radius: 25px; border: 2px solid #213B8A; } #rcorners2 { border-radius: 25px; background: #8BA1E3; } #rcorners3 { border-radius: 25px; background: url(patt1.jpg); background-position: left top; background-repeat: repeat; } > > > ="rcorners1">Пример Border-radius 1> ="rcorners2">Пример Border-radius 2> ="rcorners3">Пример Border-radius 3> > >
Border-radius не срабатывает в таблицах с установленным border-collapse: collapse.
Синтаксис свойства следующий:
border-radius: <радиус> [ / <радиус>]
То есть для него может задаваться от 1 до 4х параметров (в пикселях или процентах).
- Одно значение: для всех углов сразу;
- Два: первое значение для левого верхнего и правого нижнего углов, второе — для правого верхнего и левого нижнего;
- Три: первое значение для левого верхнего угла, второе для верхнего правого и нижнего правого, третье — для правого нижнего;
- Четыре: отвечает за углы в такой последовательности — левый верхний, правый верхний, правый нижний, левый нижний (по аналогии с заданием отступов).
Также параметры закругления углов в CSS могут быть заданы отдельно для каждого из них с помощью соответствующих свойств:
- border-top-left-radius;
- border-top-right-radius;
- border-bottom-right-radius;
- border-bottom-left-radius.
Причем в качестве параметра может использоваться одно либо два числа. В первом случае параметр задает радиус закругления по окружности, во втором — получается сначала горизонтальный, а затем вертикальный радиусы эллипсоида.
Для border-radius также можно задавать круглые углы в виде эллипсоида. При этом используется слеш «/». Параметры до слеша указывают горизонтальный радиус, после — вертикальный. Например:
Поддержка border-radius разными браузерами
В таблице ниже можете увидеть минимальные версии браузеров, начиная с которых они начали полностью поддерживать свойство border-radius.
Для ранних версий Chrome, Safari, Firefox использовались специальные префиксы дабы реализовать закругленные углы CSS. Для первых двух это свойство -webkit-border-radius, для последнего -moz-border-radius. Вот как выглядит код стилей с поддержкой ранних версий браузеров:
#rcornersall { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
Генераторы закругленных углов CSS
В сети можно найти разные сервисы, которые упрощают задачу создания закругленной рамки в CSS. Вы вполне можете использовать их в своей работе, а первая часть статьи позволит понимать сформированный код. Найти данные проекты не сложно, гуглите по ключу border radius generator. Вот парочка наиболее интересных проектов:
Предлагает максимальное число параметров: цвет фона, рамки, а также прозрачность и тень. Единственное, что итоговый код формируется в виде HTML, и придется «извлекать» из него CSS стили.
Также максимально простой сервис создания круглых блоков на CSS. Удобно, когда все это реализовано в виде ползунков, и сразу видно внешний вид итогового блока.
Инструмент с сайта developer.mozilla.org, где можете изменять форму блока непосредственно в самом элементе. Очень удобное и оригинальное решение.
Про CSS 3.0 Maker уже когда-то рассказывал, тут есть разные функции в том числе и border-radius. Сгенерированный код поддерживается всеми современными браузерами.
На всякий случай привожу еще один простой генератор, позволяющий сделать круглые углы, вдруг какой-то из сервисов выше не будет работать. Настройки здесь максимальной простые, можно выбрать тип рамки. Итоговый код универсальный.
Возможно, новичкам сходу сложно будет разобраться как сделать закругленные углы CSS с помощью border-radius, но тут на самом деле все просто. Еще раз внимательно просмотрите первую теоретическую часть статьи и проанализируйте сгенерированный сервисами код. Если будут вопросы, пишите их в комментариях.
border — radius
Свойство border — radius закругляет углы почти у любого элемента. И даже если у блока не задана явная рамка.
�� Волшебное свойство! Часто нужно в работе, поскольку дизайнеры не любят острые углы.
Пример
Скопировать ссылку «Пример» Скопировано
Самая простая штука — кнопка с закруглёнными краями:
button class="button">Купитьbutton>
.button border: 2px solid transparent; border-radius: 6px;>.button border: 2px solid transparent; border-radius: 6px; >
Обрати внимание, что мы переопределили стандартную рамку кнопки и слегка закруглили углы. Так же можно сбросить рамку с помощью none , скругление всё равно останется.
Если при нажатии добавлять кнопке внутреннюю тень такого же цвета, что и фон, она будет «нажиматься» — получится привлекательно и современно ��
.btn:focus box-shadow: inset 0 0 0 3px #e6e6e6; transition: all 0.2s;>.btn:focus box-shadow: inset 0 0 0 3px #e6e6e6; transition: all 0.2s; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Свойство border — radius задаёт радиус закругления каждого из углов элемента.
Если значение задано в процентах, то оно будет высчитываться от размеров элемента: горизонтальные размеры будут высчитываться от ширины элемента, а вертикальные — соответственно, от высоты (поэтому для квадратного элемента можно задать border — radius : 50 % , чтобы сделать его круглым).
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Пройдёмся по синтаксису:
div /* радиус в пикселях */ border-radius: 5px; /* радиус в процентах */ border-radius: 50%; /* разные радиусы для каждого из четырёх углов элемента */ border-radius: 5px 0 0 50%;>div /* радиус в пикселях */ border-radius: 5px; /* радиус в процентах */ border-radius: 50%; /* разные радиусы для каждого из четырёх углов элемента */ border-radius: 5px 0 0 50%; >
Можно управлять степенью закругления каждого из углов в отдельности или задать одно значение для всех углов сразу. Причём значение на самом деле состоит из двух — скругления по горизонтальной оси и по вертикальной. Чтобы явно задать скругление для каждой из осей (т. е. получить не круглое значение, а эллипсоидное), это значение следует записывать через символ / :
.ellipse border-radius: 2em / 50%;>.ellipse border-radius: 2em / 50%; >
Такая запись совсем не означает, что наше скругление будет равно результату деления 5em на какой-то размер, а эквивалентна такой записи:
.ellipse border-top-left-radius: 2em 50%; border-top-right-radius: 2em 50%; border-bottom-right-radius: 2em 50%; border-bottom-left-radius: 2em 50%;>.ellipse border-top-left-radius: 2em 50%; border-top-right-radius: 2em 50%; border-bottom-right-radius: 2em 50%; border-bottom-left-radius: 2em 50%; >
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Значение по умолчанию: 0 .
�� border — radius сработает даже если не будет задана видимая рамка.
�� Чтобы увидеть результат работы свойства, надо задать фоновую заливку или картинку блоку, к которому применяется закругление углов. Или рамку, или фон для родительского элемента. Что-то, что отделит белое от белого ��
�� Можно управлять радиусом закругления каждого угла в отдельности при помощи свойств:
- border — top — left — radius — радиус закругления для левого верхнего угла.
- border — top — right — radius — радиус закругления для правого верхнего угла.
- border — bottom — right — radius — радиус закругления для правого нижнего угла.
- border — bottom — left — radius — радиус закругления для левого нижнего угла.
На практике
Скопировать ссылку «На практике» Скопировано
Realetive советует
Скопировать ссылку «Realetive советует» Скопировано
�� Если вы не уверены, что блок всегда будет квадратным, то для подстраховки можно указывать закругление в абсолютных единицах. Причём указать значение, бо́льшая чем максимальная ширина и высота блока. Например, border — radius : 9999px . Если в этой ситуации указывать закругление в процентах, то значение будет считаться от ширины и высоты. Что приведёт к вытягиванию блока в яйцо:
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Самый крутой лайфхак — это круглые элементы при помощи border — radius . Они часто нужны для всяких лейблов на странице.
button class="icon" data-notifications="3">button>
.icon background-image: url(eyes.png);> .icon::after content: attr(data-notifications); /* равные ширина */ width: 25px; /* и высота */ height: 25px; /* закругляем углы на 50% */ border-radius: 50%; color: #ffffff; background-color: #ed4242;>.icon background-image: url(eyes.png); > .icon::after content: attr(data-notifications); /* равные ширина */ width: 25px; /* и высота */ height: 25px; /* закругляем углы на 50% */ border-radius: 50%; color: #ffffff; background-color: #ed4242; >