Border table border radius: css3 — Как скруглить края у таблицы (border-radius)

Leave a Comment / Разное / By /

Содержание

border-radius — CSS | MDN

border-radius — это CSS-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закруглённость каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.

Это свойство является короткой записью для четырёх свойств border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US) иborder-bottom-left-radius (en-US).

Скругление применяется ко всему background, даже если элемент не имеет границ, точное положение отсечения определяется свойством background-clip.

Свойство border-radius не применяется к элементам таблицы, когда свойство border-collapse (en-US) имеет значение collapse.

Замечание: Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться.

Например, как в border-radius:0 0 inherit inherit, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.



border-radius: 10px;


border-radius: 10px 5%;


border-radius: 2px 4px 2px;


border-radius: 1px 0 3px 4px;



border-radius: 10px 5% / 20px;


border-radius: 10px 5% / 20px 30px;


border-radius: 10px 5px 2em / 20px 25px 30%;


border-radius: 10px 5% / 20px 25em 30px 35em;


border-radius: inherit;
border-radius: initial;
border-radius: unset;

Свойство border-radius может быть задано как:

  • одно, два, три или четыре значения <length> или <percentage>. Используется для задания обычного радиуса углов.
  • одна, две, три или четыре пары значений <length> or <percentage>, разделённые «/». Используется для задания эллиптического скругления.

Значения

<length>
Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.
<percentage>
Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.

Например:

border-radius: 1em/5em;


border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;


border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

Формальный синтаксис

  border: solid 10px;
  /* угол изгибается в виде 'D' */
  border-radius: 10px 40px 40px 10px;

  border: groove 1em red;
  border-radius: 2em;

  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;

  border: none;
  border-radius: 40px 10px;

  border: none;
  border-radius: 50%;

  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;

  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;

BCD tables only load in the browser

border-radius | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+10.5+3.0+1.0+2.1+1.0+

Краткая информация

Значение по умолчанию0
НаследуетсяНет
Процентная записьДа, относительно ширины блока
Применяется		Ко всем элементам, за исключением таблиц с border-collapse: collapse
Ссылка на спецификациюhttp://www.w3.org/TR/css3-background/#the-border-radius

Версии CSS

Описание

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

Табл. 1. Зависимость от числа значений
Число значенийРезультат
1Радиус указывается для всех четырех уголков.
2
Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скругленным уголком и эллиптическим уголком.

Рис. 1. Радиус скругления для создания разных типов уголков

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
   .radius {
    background: #f0f0f0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 15px; /* Поля вокруг текста */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style>
 </head> 
 <body> 
  <div>
   border-radius: 50px 0 0 50px;
  </div>
  <div>
   border-radius: 40px 10px;
  </div>
  <div>
   border-radius: 13em/3em;
  </div>
  <div>
   border-radius: 13em 0.5em/1em 0.5em;
  </div>
  <div>
   border-radius: 8px;
  </div>
 </body> 
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Радиусы скругления в браузере Safari

Браузеры

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius.

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius.

collapse не смешиваются. Как я могу использовать border-radius для создания свернутой таблицы с закругленными углами?

Edit — Оригинальное название: Есть ли альтернативный способ достижения border-collapse:collapseв CSS(для того , чтобы иметь разрушились, закругленный угловой стол)?

Поскольку оказывается, что простое свертывание границ таблицы не решает проблему с корнем, я обновил заголовок, чтобы лучше отразить обсуждение.

Я пытаюсь сделать таблицу со скругленными углами, используя CSS3 border-radiusсвойство. Стили таблиц, которые я использую, выглядят примерно так:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

Здесь проблема. Я также хочу установить border-collapse:collapseсвойство, и когда оно установлено, border-radiusбольше не работает. Есть ли способ, основанный на CSS, чтобы получить тот же эффект, что и border-collapse:collapseбез его использования?

Редактирование:

Я сделал простую страницу, чтобы продемонстрировать здесь проблему (только Firefox / Safari).

Кажется, что большая часть проблемы заключается в том, что настройка таблицы на закругленные углы не влияет на углы угловых tdэлементов. Если бы таблица была всего одного цвета, это не было бы проблемой, поскольку я мог бы просто сделать верхний и нижний

tdуглы округленными для первого и последнего ряда соответственно. Тем не менее, я использую разные цвета фона для таблицы, чтобы различать заголовки и для чередования, поэтому внутренние tdэлементы также будут иметь свои закругленные углы.

Краткое изложение предлагаемых решений:

Окружение стола другим элементом с закругленными углами не работает, потому что квадратные углы стола «просвечивают».

Указание ширины границы равной 0 не приводит к свертыванию таблицы.

Нижние tdуглы остаются квадратными после установки нуля в пространстве ячеек.

Использование JavaScript — работает, избегая проблемы.

Возможные решения:

Таблицы генерируются в PHP, поэтому я мог бы просто применить разные классы к каждому внешнему th / tds и стилизовать каждый угол отдельно. Я бы предпочел не делать этого, так как это не очень элегантно и немного неудобно применять к нескольким таблицам, поэтому, пожалуйста, продолжайте поступать предложения.

Возможное решение 2 — использовать JavaScript (в частности, jQuery) для стилизации углов. Это решение также работает, но все еще не совсем то, что я ищу (я знаю, что я привередлива). У меня есть две оговорки:

  1. это очень легкий сайт, и я бы хотел, чтобы JavaScript был минимальным
  2. часть привлекательности, которую имеет для меня использование border-radius, — это постепенная деградация и прогрессивное улучшение. Используя border-radius для всех закругленных углов, я надеюсь, что в браузерах с поддержкой CSS3 будет постоянно округленный сайт, а в других — квадратный сайт (я смотрю на вас, IE).

Я знаю, что пытаться сделать это с помощью CSS3 сегодня может показаться ненужным, но у меня есть свои причины. Я также хотел бы отметить, что эта проблема является результатом спецификации w3c, а не плохой поддержки CSS3, поэтому любое решение будет по-прежнему актуальным и полезным, когда CSS3 получит более широкую поддержку.

border-radius CSS | CSS

Свойство border radius CSS используется для закругления углов элемента. Это сокращенная версия свойств: border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius.

Оно может принимать от одного до четырех значений или восемь значений, разделенных косой чертой «/», с одним — четырьмя значениями с каждой стороны от косой черты.

  • Если косая черта не указана, то свойство может принимать одно, два, три или четыре значения.
border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?; // '?' указывать данное значение необязательно
  • Если задано четыре значения, то они определяют радиусы каждого из четырех углов. То есть первое значение будет указывать x и y радиуса верхнего левого угла, таким образом, это будет круговая кривая. Второе значение задает радиусы для верхнего правого угла, третье — определяет радиусы нижнего правого угла, а четвертое — нижнего левого;
  • Если задано три значения, первое устанавливает радиус верхнего левого угла, второе — радиус верхнего правого и левого нижнего углов, а третье — нижнего правого угла;
  • Если задано два значения CSS table border radius, первое определяет радиусы левого верхнего и правого нижнего углов, а второе — радиусы верхнего правого и нижнего левого углов;
  • Если задано одно значение, то оно задает одинаковые радиусы четырех углов.

Например:

border-radius: 1em 3em 2em;

эквивалентно:

border-top-left-radius:     1em;
border-top-right-radius:    3em;
border-bottom-right-radius: 2em;
border-bottom-left-radius:  3em;

В каждом из перечисленных выше случаев, когда не используется косая черта, четыре угла элемента будут закруглены, а их кривизна будет идеальным кругом:

Два одинаковых радиуса для каждого угла дают круговую кривую. Каждый угол в этом примере имеет горизонтальный и вертикальный радиус 50 пикселей.

Если косая черта указана, то свойство может принимать до восьми значений — от одного до четырех значений с каждой стороны от косой черты.

border-radius: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?

Значения, указанные перед косой чертой, задают горизонтальный радиус углов. Значения, указанные после косой черты, задают вертикальный радиус соответствующих углов.

Например:

border-radius: 2em 1em 4em / 0.5em 3em;

эквивалентно:

border-top-left-radius:     2em 0.5em;
border-top-right-radius:    1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius:  1em 3em;

В этом случае применения border radius CSS углы элемента будут закруглены, и их кривизна будет эллиптической:

Два неодинаковых радиуса для каждого угла дают эллиптическую кривизну. Каждый угол в этом примере имеет горизонтальный радиус 100 пикселей и вертикальный радиус 50 пикселей.

Если элемент использует фоновый цвет или изображение, фон также будет обрезаться указанным радиусом границы:

Фоновое изображение элемента обрезается в соответствии с указанным радиусом границы.

Но иногда цвет фона элемента может «просачиваться» за пределы границы, когда она закруглена. Чтобы исправить это, можно использовать свойство background-clip и установить для него значение padding-box.

.element {
    border-radius: 30px;
    background-clip: padding-box;
}

Если у элемента есть границы изображения, то они не подрезается кривой закругленных углов.

Содержимое элемента может выходить за его границы в углах, которые были закруглены, если для элемента не установлено значение отступа, достаточное, чтобы сместить содержимое внутрь:

Содержимое элемента может выходить за закругленную границу, если для элемента не заданы отступы.

В этом примере moz border radius CSS добавлены отступы, чтобы содержимое не выходило за закругленные углы границы. Обратите внимание, что сама граница не отображается, но фон все равно будет иметь закругленные углы.

.element {
    background: black;
    color: white;
    border-radius: 1em;
    padding: 1em;
}

Кроме этого область вне кривой границы не принимает pointer events, связанные с данным элементом.

Также кривые углов не должны пересекаться: когда сумма радиусов любых двух соседних границ превышает размер блока, браузеры должны пропорционально уменьшить используемые значения всех радиусов границ, чтобы ни один из них не перекрывался.

Процентные значения идеально подходят для создания круглых или эллиптических форм. Использование border radius CSS: 50% дает полностью круглую форму элемента, у которого высота и ширина равны:

Элемент с одинаковой высотой, шириной и значением радиуса границы 50%.

Если высота и ширина элемента не равны, мы получим эллиптическую форму:

Элемент с радиусом границы 50%, высота и ширина которого не равны.

Синтаксис:

border-radius: [<длина> | <проценты>] {1,4} [/ [<длина> | <проценты>] {1,4}]?

Начальное значение: 0 0 0 0, оно задает начальное значения каждого из отдельных свойств.

Применяется: ко всем элементам. Но браузеры не обязательно должны применять его к элементам table и inline-table, когда для свойства border-collapse задано значение collapse. На данный момент поведение внутренних элементов таблицы не определено.

Анимируется: Каждое из полных свойств анимируется, как два значения длины, процентных значения или значения calc(). Когда оба значения являются длинами, они интерполируются как длины. Когда оба значения являются процентами, они интерполируются в процентах. Иначе оба значения преобразуются свойством calc().

Неофициальный синтаксис webkit border radius CSS:

border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?;

или так:

border-radius: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?

В обоих случаях вопросительный знак (?) означает, что значение является необязательным. Если значение опущено, браузер определяет его, как описано выше.

Каждый радиус может задаваться процентами или значением длины. Процентное соотношение для горизонтального радиуса относится к ширине блока, тогда как процентное соотношение для вертикального радиуса относится к высоте блока. Отрицательные значения не допускаются.

<percentage>
<length>

Примеры

border-radius: 50%;
border-radius: 30px 20px 40px;
border-radius: 1em 2em;
border-radius: 3em / 2em 4em;
border-radius: 1em 2em 1em 3em / 2em 3em;

Демо-версия

Свойство CSS3 Border-radius (закругленные углы)

Метод закругления углов. Охватывает поддержку сокращенного свойства border radius CSS, а также полных свойств (например, `border-top-left-radius`).

Поддерживается со следующих версий:

Стационарные

ChromeFirefoxIEOperaSafari
4 *2 *9103.1 *

Мобильные

iOS SafariAndroidOpera MobileAndroid ChromeAndroid Firefox
3.2 *2.1 *115651

* требуется указание префикса

Пожалуйста, опубликуйте свои комментарии по текущей теме статьи. За комментарии, дизлайки, подписки, лайки, отклики низкий вам поклон!

Данная публикация является переводом статьи «border-radius» , подготовленная редакцией проекта.

Границы — Material-UI

Используй настройки border и border-radius для стилизации элементов. Доступно для изображений, кнопок и других элементов.

Border

Используй настройки для добавления или удаления границ. Можно устанавливать как все сразу, так и каждую часть по отдельности.

Добавление

<Box border={1}>…
<Box borderTop={1}>…
<Box borderRight={1}>…
<Box borderBottom={1}>…
<Box borderLeft={1}>…

Удаление

<Box border={0}>…
<Box borderTop={0}>…
<Box borderRight={0}>…
<Box borderBottom={0}>…
<Box borderLeft={0}>…

Цвет границы

<Box borderColor="primary.main">…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…

Border-radius

<Box borderRadius="50%">…
<Box borderRadius="borderRadius">…
<Box borderRadius={16}>…

API

import { borders } from '@material-ui/system';
ИмпортСвойствоСвойство CSSВ теме
borderborderborderborders
borderTopborderTopborder-topborders
borderLeftborderLeftborder-leftborders
borderRightborderRightborder-rightborders
borderBottomborderBottomborder-bottomborders
borderColorborderColorborder-colorpalette
borderRadiusborderRadiusborder-radiusshape

border-radius | CSS | WebReference

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Краткая информация

Значение по умолчанию0
НаследуетсяНет
ПрименяетсяКо всем элементам, за исключением таблиц с border-collapse: collapse
АнимируетсяДа

Синтаксис 

border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через косую черту (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчёт ведётся относительно ширины блока.

Табл. 1. Зависимость от числа значений
Число значенийРезультат
1Радиус указывается для всех четырёх уголков.
2Первое значение задаёт радиус верхнего левого и нижнего правого уголков, второе значение — верхнего правого и нижнего левого уголков.
3Первое значение устанавливает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого уголков, а третье — для нижнего правого уголка.
4По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголков.

В случае задания двух параметров через косую черту, то первый параметр задаёт радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скруглённым уголком и эллиптическим уголком.

Рис. 1. Радиус скругления для создания разных типов уголков

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>border-radius</title> <style> .radius { background: #f0f0f0; /* Цвет фона */ border: 1px solid black; /* Параметры рамки */ padding: 15px; /* Поля вокруг текста */ margin-bottom: 10px; /* Отступ снизу */ } </style> </head> <body> <div> border-radius: 50px 0 0 50px; </div> <div> border-radius: 40px 10px; </div> <div> border-radius: 13em/3em; </div> <div> border-radius: 13em 0.5em/1em 0.5em; </div> <div> border-radius: 8px; </div> </body> </html>

Результат данного примера показан на рис. 2.

Рис. 2. Радиусы скругления

Объектная модель

Объект.style.borderRadius

Примечание

Chrome до версии 4.0, Safari до версии 5.0 и Android до версии 2.1 используют свойство -webkit-border-radius.

Firefox до версии 4.0 использует свойство -moz-border-radius.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

 
Базовый синтаксис9121410.53514
Проценты912410.554
Эллиптические уголки912110.533.5
 
Базовый синтаксис12.11410.535
Проценты2.1410.55
Эллиптические уголки2.13.510.53

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 29.02.2020

Редакторы: Влад Мержевич

Все вопросы по теме border-radius

Привет всем, я пытаюсь добавить тень рамки и радиус границы к моему элементу .card . Но ничего не происходит. Как мне решить эту проблему. И почему это происходит? У меня есть теория, что речь идет о flexbox. А также есть ли кто-нибудь, кто может критиковать мое наименование класса. Я впервые ….

Я новичок в веб-разработке. Я создал панель навигации с помощью Bootstrap и добавил: hover к ссылкам. Я также изменил цвет и закруглил углы. При наведении курсора на ссылку поле поворачивается (как и предполагалось). Проблема в том, что когда я нахожу ссылку, она снова превращается в поле. Я пыта….

У меня есть проект, в котором мне нужно создать карту определенного типа. Эти карточки содержат градиентный фон при наведении курсора. Я добавил элемент до, который отображается при наведении курсора на элемент. В …….

Почему этот код скрывает дочерний элемент контейнера и как решить эту проблему. Я не могу установить радиус границы с одной стороны и границу с одной или двух сторон Container( child: Text( «Test», style: TextStyle( color: Theme.of(context).primaryCol….

Я делаю эту карточку с использованием React, HTML и CSS. Вот мой код: <div className=»plan»> <div className=»plan-name»> <h5>BASIC</h5> </div> <div className=»plan-price»> <h3>$ 6.99</h3> <span>Screen Availabilty Simultaneously</span> </div> <div className=»plan-details»> ….

Я хочу добиться следующего эффекта с помощью box-shadow: Но я добиваюсь следующего: Я использую следующий код: <div></div> .progress-container { width: 100%; height: 11px; position: relative; background: #EAEFF5; border-radius: 5px; z-index: -1; box-shad….

Я хочу увеличить расстояние между штрихами границы. Пробовал разные методы. например: введите здесь описание ссылки. Но это работает некорректно, когда я использую border-radius. Попробуйте в этом …….

Мой радиус границы не отображается, если у меня есть свойство border-collapse в теге таблицы. Мне нужно включить свойство border-radius, и если я удалю свойство border-collapse, я не получу того вида, который мне нужен, а именно серых секций, чтобы перейти к самому краю таблицы. Как решить эту проб….

Хром Fire Fox Что я могу сделать, чтобы изменить свой код так, чтобы он выглядел как Chrome в Firefox? Я использую псевдоэлементы, чтобы имитировать появление перекрывающихся строк таблицы. Если этот вид может быть достигнут без использования псевдоэлементов, это тоже решение, которое мне подход….

У меня есть CSS, который использует как граничный радиус, так и фильтр оттенков серого. Я хочу, чтобы радиус границы был постоянно на месте, но оттенки серого исчезали при наведении курсора. Радиус границы работает нормально, пока я не добавлю оттенки серого, затем он перестает работать и просто ото….

У меня есть маленький круг в 4 пикселя, и я хочу масштабировать его размер с помощью anime.js. Он отлично работает при 100% масштабировании (по умолчанию), но я также хочу, чтобы он вел себя так же при масштабировании по умолчанию от 50 до 100%. Пример скрипки: https://jsfiddle.net/6x4ry3no/1/ Как ….

Кажется, это будет не так сложно сделать, но мне тяжело с этим. Я просто хочу добавить левую границу к div так: Я попытался добавить свойство border-left (border-left: 5px solid blue;), но это привело к следующему: Может кто-нибудь сказать мне, как добавить границу с прямым краем без скругления св….

Я следую html с CSS .image_with_loader_container { position: relative; width: 100%; padding-bottom: 139.34426%; background: #dbdbdb; } .image_with_loader_container img { border-radius: 4.75%/3.5%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } <div c….

html — свойство CSS3 border-radius и border-collapse: collapse несовместимы. Как я могу использовать border-radius для создания свернутой таблицы с закругленными углами?

Edit — оригинальное название: Есть ли альтернативный способ достижения border-collapse: collapse в CSS (чтобы иметь свернутую таблицу с закругленными углами)?

Поскольку оказывается, что простое сворачивание границ таблицы не решает основную проблему, я обновил заголовок, чтобы лучше отразить обсуждение.

Я пытаюсь создать таблицу с закругленными углами , используя свойство CSS3 border-radius . Стили таблиц, которые я использую, выглядят примерно так:

  стол {
    -moz-border-radius: 10 пикселей;
    -webkit-border-radius: 10 пикселей;
    радиус границы: 10 пикселей
}

Вот проблема. Я также хочу установить свойство border-collapse: collapse , и когда оно установлено, border-radius больше не работает. Есть ли способ на основе CSS, чтобы я мог получить тот же эффект, что и border-collapse: collapse , не используя его на самом деле?

Редакции:

Я сделал простую страницу, чтобы продемонстрировать здесь проблему (только Firefox / Safari).

Похоже, что большая часть проблемы заключается в том, что настройка стола с закругленными углами не влияет на углы угловых элементов td . Если бы таблица была одного цвета, это не было бы проблемой, поскольку я мог бы просто скруглить верхний и нижний углы td для первой и последней строки соответственно. Однако я использую разные цвета фона для таблицы, чтобы различать заголовки и полосы, поэтому внутренние элементы td также будут отображать свои закругленные углы.

Краткое изложение предлагаемых решений:

Окружение стола другим элементом с закругленными углами не работает, потому что квадратные углы стола «проступают».

Установка ширины границы равной 0 не сворачивает таблицу.

Нижний td углы остаются квадратными после установки нулевого интервала ячеек.

Использование JavaScript вместо этого помогает избежать проблемы.

Возможные решения:

Таблицы генерируются в PHP, поэтому я мог бы просто применить другой класс к каждому из внешних th / tds и стилизовать каждый угол отдельно.Я бы предпочел не делать этого, так как это не очень элегантно и немного неудобно применять к нескольким таблицам, поэтому, пожалуйста, продолжайте поступать предложения.

Возможное решение 2 — использовать JavaScript (в частности, jQuery) для стилизации углов. Это решение тоже работает, но все же не совсем то, что я ищу (знаю, что я придирчивый). У меня два бронирования:

  1. это очень легкий сайт, и я хотел бы свести JavaScript к минимуму
  2. Отчасти привлекательность использования border-radius для меня — это изящная деградация и прогрессивное улучшение.Используя border-radius для всех закругленных углов, я надеюсь получить сайт с последовательными закруглениями в браузерах с поддержкой CSS3 и постоянный квадратный сайт в других (я смотрю на вас, IE).

Я знаю, что попытки сделать это с помощью CSS3 сегодня могут показаться излишними, но у меня есть свои причины. Я также хотел бы указать, что эта проблема является результатом спецификации w3c, а не плохой поддержкой CSS3, поэтому любое решение будет актуальным и полезным, когда CSS3 получит более широкую поддержку.

html — Радиус границы и граница вместе в таблице td

html — Радиус границы и граница вместе в таблице td — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 9к раз

Я хочу присвоить моему первому и последнему border-radius , чтобы моя таблица выглядела как таблица с закругленными углами.

Сначала я применил фон к моему , а затем добавил border-radius , который, я думаю, отлично работает (фон закруглен из угла).

После этого, когда я применил границу к моему , я увидел странную вещь (см. Фрагмент ниже).

Итак, мой вопрос: почему граница не округляется как фон?

Фрагмент стека 

  стол {
  ширина: 100%;
  граница-коллапс: коллапс;
  table-layout: фиксированный;
  выравнивание текста: центр;
  шрифт: 13px Verdana;
}

table td {
  граница: 1px solid # 000000;
  отступ: 20 пикселей;
  фон: красный;
  цвет: #ffffff;
}

table tbody tr: first-child td: first-child {
  радиус границы: 20 пикселей 0 0 0;
}

table tbody tr: first-child td: last-child {
  радиус границы: 0 20 пикселей 0 0;
}  
  <таблица>
  
     Один 
     Два 
     Три

Создан 22 янв.

Бхуван

15.5k44 золотых знака2626 серебряных знаков5050 бронзовых знаков

4

попробовать граница-коллапс: наследование; и сделайте ‘border-spacing: 0px;’

  стол {
  ширина: 100%;
  граница-коллапс: наследование;
  table-layout: фиксированный;
  выравнивание текста: центр;
  шрифт: 13px Verdana;
  радиус границы: 30 пикселей;
  интервал границы: 0 пикселей;
}

table td {
  граница: 1px solid # 000000;
  отступ: 20 пикселей;
  фон: красный;
  цвет: #ffffff;
  граница слева: нет;
}
table td: first-child {
  граница слева: 1px solid # 000000;
}
table tbody tr: first-child td: first-child {
  радиус границы: 20 пикселей 0 0 0;
}

table tbody tr: first-child td: last-child {
  радиус границы: 0 20 пикселей 0 0;
}  
  <таблица>
  
     Один 
     Два 
     Три

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *