css3 — Как скруглить края у таблицы (border-radius)
Вопрос задан
Изменён 2 года 1 месяц назад
Просмотрен 58k раз
<table>
<thead>
<tr>
<td>ID</td>
<td>Название</td>
<td>Цена</td>
<td>Цвета</td>
<td>Продажи</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name</td>
<td>50$</td>
<td>Black, White</td>
<td>104</td>
</tr>
<tr>
<td>2</td>
<td>Name</td>
<td>70$</td>
<td>Red, Blue, Grey</td>
<td>255</td>
</tr>
</tbody>
</table>
Нужно скруглить края у всей таблицы.
Я уже как не пытался, к чему не применял… Я у первого td скгруглить пытался, у tr пытался. У всей таблице, понятно, не применяется. В общем все никак. Помогите, пожалуйста
- css3
- html
- html5
- css
1
А на самом деле для кросс-браузерности вот так:):
.table_block {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border: 1px solid #000;
display: block;
}
Хотя наверно мой ответ уже неактуален.
2
Насколько я помню, проблема глубже чем расстановка вендерных префиксов. border-radius конфликтует с border-collapse: collapse, которое, скорее всего используется. Я решал это двумя способами:
отказаться от
border-collapse: collapse, а бордюры внутри таблицы рисовать ячейкам.
не отказываться от
border-collapse: collapse, но отказываться от вненего бордюра таблицы. Таблицу помещать в div. div`у рисовать бордюр и скруглять его.
P.S. Правда сейчас повторить не удается проблему 🙂
Попробуйте так:
.table_block {
border-radius: 10px;
border: 1px solid #000;
display: block;
}
Демо
Если ты пробуешь сделать в Internet Explorer у тебя ничего не выйдет. В нем нужно использовать картинки — а в других браузерах должно работать как написано ниже. Прямо в теге прописан стиль:
<table>
<thead>
<tr>
<td>ID</td>
<td>Название</td>
<td>Цена</td>
<td>Цвета</td>
<td>Продажи</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name</td>
<td>50$</td>
<td>Black, White</td>
<td>104</td>
</tr>
<tr>
<td>2</td>
<td>Name</td>
<td>70$</td>
<td>Red, Blue, Grey</td>
<td>255</td>
</tr>
</tbody>
</table>
И стиль прописан в классе:
<style type="text/css">
.
table_block{ border-radius: 15px; border-style: solid;}
</style>
<table class ='table_block'>
<thead>
<tr>
<td>ID</td>
<td>Название</td>
<td>Цена</td>
<td>Цвета</td>
<td>Продажи</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name</td>
<td>50$</td>
<td>Black, White</td>
<td>104</td>
</tr>
<tr>
<td>2</td>
<td>Name</td>
<td>70$</td>
<td>Red, Blue, Grey</td>
<td>255</td>
</tr>
</tbody>
</table>
Можно ещё проще:
table{ overflow: hidden; border-radius: 6px;}
.
table_block {
border-radius: 10px;
border: 1px solid #000;
}
Тоже столкнулся с проблемой, у меня получилось следующим образом!…
Я сделал обертку div обертку вокруг table
div {
border: 1px solid red;
border-radius: 5px;
}
table {
overflow: hidden;
border-radius: 5px;
}
border-radius: 20px; overflow: hidden;
Изменять свойство display не стоит. Зачем тогда использовать таблицу? Моё решение такое:
tbody {
border-radius: 4px;
box-shadow: 0 0 1px #000;
}
Пример: https://codepen.io/madebydima/pen/KKNmBxR
.table_block td {
padding: 10px;
}
.table_block tbody {
border-radius: 10px;
box-shadow: 0 0 1px #000;
}<table>
<thead>
<tr>
<td>ID</td>
<td>Название</td>
<td>Цена</td>
<td>Цвета</td>
<td>Продажи</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name</td>
<td>50$</td>
<td>Black, White</td>
<td>104</td>
</tr>
<tr>
<td>2</td>
<td>Name</td>
<td>70$</td>
<td>Red, Blue, Grey</td>
<td>255</td>
</tr>
</tbody>
</table>4
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Радиус границы — Tailwind CSS
Основы использования
Закругленные углы
.
rounded-sm, .rounded или .rounded-lg, чтобы применить к элементу разные размеры радиуса границы.rounded
rounded-md
rounded-lg
rounded-full
<div></div> <div></div> <div></div> <div></div>
Кнопки-таблетки
Используйте утилиту rounded-full для создания кнопок-таблеток.
rounded-full
<button>Сохранить изменения</button>
Без округления
Используйте rounded-none, чтобы удалить существующий радиус границы элемента.
Это чаще всего используется для удаления радиуса границы, который был применен в меньшей контрольной точке.
rounded-none
<button>Сохранить изменения</button>
Округление сторон отдельно
Используйте rounded-{t|r|b|l}{-size?} только для округления одной стороны элемента.
rounded-t-lg
rounded-r-lg
rounded-b-lg
rounded-l-lg
<div></div> <div></div> <div></div> <div></div>
Отдельное скругление углов
Используйте rounded-{tl|tr|br|bl}{-size?} только для скругления одного угла элемента.
rounded-tl-lg
rounded-tr-lg
rounded-br-lg
rounded-bl-lg
<div></div> <div></div> <div></div> <div></div>
Применяя условно
Наведение, фокус и другие состояния
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:rounded-lg to only apply the rounded-lg utility on hover.
<div> <!-- ... --> </div>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
Контрольные точки и медиа-запросы
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:rounded-lg to apply the rounded-lg utility at only medium screen sizes and above.
<div> <!-- ... --> </div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
Использование пользовательских значений
Настройка вашей темы
По умолчанию Tailwind предоставляет пять утилит для определения размера радиуса границы. Вы можете изменить, добавить или удалить их, отредактировав раздел theme.borderRadius вашей конфигурации Tailwind.
tailwind.config.js
module.exports = {
theme: {
borderRadius: {
'none': '0',
'sm': '0.125rem',
DEFAULT: '0.25rem',
DEFAULT: '4px',
'md': '0.375rem',
'lg': '0.5rem',
'full': '9999px',
'large': '12px',
}
}
}
Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.
Произвольные значения
If you need to use a one-off border-radius value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<div> <!-- ... --> </div>
Learn more about arbitrary value support in the arbitrary values documentation.
Радиус границы: создавайте закругленные углы с помощью CSS!
Tweet
Свойство CSS3 border-radius позволяет веб-разработчикам легко использовать более закругленные углы в своих элементах дизайна без необходимости использования угловых изображений или использования нескольких тегов div, и, возможно, это один из самых обсуждаемых аспектов CSS3. .
С момента первого анонса в 2005 году свойство boder-radius получило широкую поддержку браузеров (хотя и с некоторыми расхождениями), и благодаря относительной простоте использования веб-разработчики быстро освоили эту новую технологию.
Вот простой пример:
Это поле должно иметь закругленные углы для Firefox, Safari/Chrome, Opera и IE9.
Теоретически код для этого примера довольно прост:
#example1 {
border-radius: 15px;
}
Однако на данный момент вам также необходимо использовать префикс -moz- для поддержки Firefox (дополнительные сведения см.
в разделе поддержки браузеров этой статьи):
#example1 {
-moz- радиус границы: 15px;
радиус границы: 15px;
}
Как это работает
Скругленные углы можно создавать независимо, используя четыре отдельных свойства border-*-radius (border-bottom-left-radius, border-top-left-radius и т. д.) или для всех четырех углов. одновременно используя сокращенное свойство border-radius.
Сначала мы рассмотрим синтаксис отдельных свойств border-*-radius, а затем рассмотрим, как работает сокращенное свойство border-radius.
граница-нижний-левый-радиус, граница-нижняя-правая-радиус, граница-верхний-левый-радиус, граница-верхний-правый-радиус
Каждое из свойств border-*-radius может принимать одно или два значения, выраженные в виде длины или процента (проценты относятся к соответствующим размерам рамки).
Синтаксис:
граница-*-*-радиус: [ <длина> | <%> ] [ <длина> | <%> ]?
Примеры:
border-top-left-radius: 10px 5px;
граница-нижний-правый-радиус: 10% 5%;
граница-верхний-правый-радиус: 10px;
Там, где указаны два значения, они используются для определения по порядку горизонтального и вертикального радиусов четверти эллипса, который, в свою очередь, определяет кривизну угла внешнего края границы.
Если указано только одно значение, оно используется для одинакового определения горизонтального и вертикального радиусов.
На следующей диаграмме показано несколько примеров того, как могут выглядеть углы при разных радиусах:
Если одно из значений равно нулю, угол будет квадратным, а не круглым.
border-radius
Сокращенное свойство border-radius можно использовать для одновременного определения всех четырех углов. Свойство принимает один или два набора значений, каждый из которых содержит от одной до четырех длин или процентов.
Синтаксис:
[ <длина> | <процент> ]{1,4} [ / [ <длина> | <процент> ]{1,4} ]?
Примеры:
радиус границы: 5px 10px 5px 10px / 10px 5px 10px 5px;
радиус границы: 5 пикселей;
радиус границы: 5px 10px / 10px;
Первый набор значений (1-4) определяет горизонтальные радиусы для всех четырех углов. Необязательный второй набор значений, перед которым ставится «/», определяет вертикальные радиусы для всех четырех углов.
Если предоставляется только один набор значений, они используются для одинакового определения как вертикали, так и горизонтали.
Для каждого набора значений применяется следующее:
Если указаны все четыре значения, они представляют верхний левый, верхний правый, нижний правый и нижний левый радиусы соответственно. Если нижний левый опущен, он совпадает с верхним правым, если нижний правый опущен, он совпадает с верхним левым, и если указано только одно значение, оно используется для одинаковой установки всех четырех радиусов.
Поддержка браузера
В настоящее время Opera (начиная с версии 10.5), Safari (начиная с версии 5) и Chrome (начиная с версии 5) поддерживают отдельные свойства border-*-radius и сокращенное свойство border-radius, как изначально определено в текущая спецификация W3C (хотя по-прежнему существуют нерешенные ошибки по таким вопросам, как переходы стилей границы, использование процентов для длины и т. д.).
Mozilla Firefox (начиная с версии 1.
0) поддерживает border-radius с префиксом -moz-, хотя между реализацией Mozilla и текущей спецификацией W3C есть некоторые расхождения (см. ниже).
Обновление: Последние ночные версии Firefox поддерживают border-radius без префикса -moz-.
Safari и Chrome (и другие браузеры на основе webkit) поддерживают border-radius с префиксом -webkit-, начиная с версии 3 (больше не требуется, начиная с версии 5), хотя опять же с некоторыми расхождениями с текущей спецификацией (см. эту статью для дополнительные сведения о том, как старые версии Webkit обрабатывают радиус границы).
Даже Microsoft пообещала и продемонстрировала в своем последнем предварительном выпуске поддержку border-radius из Internet Explorer 9.далее (без префикса).
Префикс -moz-
Браузер Mozilla Firefox поддерживает свойство border-radius с префиксом -moz- , начиная с версии 1.0. Однако только начиная с версии 3.5 в браузере разрешены эллиптические углы, т.
е. принятие двух значений на угол для независимого определения горизонтального и вертикального радиусов. До версии 3.5 браузер принимал только одно значение для каждого угла, что приводило к углам с одинаковыми радиусами по горизонтали и вертикали.
Синтаксис, начиная с Firefox 3.5 и выше, в основном следует текущей спецификации W3C, как описано в этой статье, с префиксом -moz-. Единственное существенное различие заключается в именовании отдельных свойств border-*-radius, при этом свойства с префиксом -moz- следуют немного другому соглашению об именах, как показано ниже:
| Спецификация W3C | Реализация Mozilla |
|---|---|
| радиус границы | -moz-граница-радиус |
| граница-верхний-левый-радиус | -moz-border-radius-topleft |
| граница-верхний-правый-радиус | -moz-border-radius-topright |
| граница-нижняя-правая-радиус | -moz-border-radius-bottomright |
| граница-нижний-левый радиус | -moz-border-radius-bottomleft |
Реализация Mozilla также ведет себя немного иначе, чем в спецификации, когда указываются проценты.
Вы можете прочитать больше о Центре разработчиков Mozilla здесь.
Кросс-браузерные примеры
Вот несколько основных примеров, которые должны работать в текущих версиях Firefox, Safari/Chrome, Opera и даже IE9:
A
B
C
D 3 71007
7 E
6 E #Example_A {
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 50px;
граница-нижний-правый-радиус: 50px;
}
#Example_B {
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 50px 25px;
граница-нижний-правый-радиус: 50px 25px;
}
#Example_C {
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 25px 50px;
граница-нижний-правый-радиус: 25px 50px;
}
#Example_D {
height: 5em;
ширина: 12см;
-moz-border-radius: 1em 4em 1em 4em;
радиус границы: 1em 4em 1em 4em;
}
#Example_E {
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius: 25px 10px / 10px 25px;
радиус границы: 25px 10px / 10px 25px;
}
#Example_F {
высота: 70 пикселей;
ширина: 70 пикселей;
-moz-border-radius: 35px;
радиус границы: 35 пикселей;
}
Дополнительные примечания и дополнительная литература
Спецификация фонов и границ W3C более подробно описывает форму угла (особенно в случаях, когда две соседние границы имеют разную ширину), влияние радиуса границы на фоновые изображения, цвет и переходы стилей, что происходит, когда кривые перекрываются, и эффект радиуса границы на таблицах.
Это лучше всего объясняется в следующих разделах спецификации:
- 4.4.1 Формирование углов
- 4.4.2 Обрезка углов
- 4.4.3 Переходы цвета и стиля
- 4.4.4 Перекрывающиеся кривые
- 4.4.5 Влияние на таблицы
НАШИ СПОНСОРЫ
Реклама здесь?
TAG CLOUD
CSS закругленные края
html 8 месяцев назад
от Aqsa Yasin
При работе со многими веб-сайтами и языками сценариев вы, возможно, сталкивались со многими ситуациями, когда сталкивались с закругленными краями или углами некоторых элементов или изображений. Многие разработчики и программисты стилизовали изображения или элементы HTML, чтобы сделать свои веб-страницы более эстетичными и привлекательными. Эти концепции также были реализованы в стилях HTML CSS. Он предоставляет нам свойство радиуса границы, а также различные свойства отступов, ширины и высоты для скругления краев некоторых элементов.
В этой статье мы рассмотрим эти свойства, которые делают веб-страницу более привлекательной.
Пример #01:
Скруглим края любых изображений или некоторых абзацев. Мы начали HTML-код с использованием базового тега HTML, за которым следует тег заголовка. Тег head содержит тег title, который использовался для присвоения заголовка веб-странице в виде «CSS закругленных краев или углов». Внутри тега body HTML-документа мы использовали заголовок размера 1, который не будет использоваться для скругления углов. Три абзаца были использованы с использованием тега абзаца «p».
Первые два абзаца определены с двумя разными классами: a и b. Третий абзац был указан с идентификатором «c». Все эти три абзаца содержат предложения, которые можно было бы использовать в качестве содержания абзаца. Эти абзацы могут отображаться с закругленными краями на HTML-странице. Давайте посмотрим на CSS этой страницы. В теге стиля этого HTML-скрипта мы указали классы a и b для первых двух абзацев, чтобы отдельно стилизовать их оба, в то время как идентификатор «c» используется со знаком решетки для стилизации отдельно.
Мы использовали свойство радиуса границы для первого класса «а», чтобы добавить радиус 25 пикселей, и фон стал бы небесно-голубым. Свойство радиуса границы также использовалось для второго класса, чтобы добавить радиус границы 45 пикселей со сплошной рамкой в два пикселя вокруг него. Для обоих первых классов мы использовали 20-пиксельный отступ, 200-пиксельную ширину и 50-пиксельную высоту. С другой стороны, идентификатор третьего абзаца был использован для добавления радиуса 90 пикселей вокруг него.
Используя свойство фона, изображение было добавлено в качестве фона. Наряду с этим свойство положения фона использовалось для позиционирования фона изображения, а свойство повторения фона было установлено на повторение. Благодаря использованию этого свойства фоновое изображение может повторяться максимальное количество раз. Отступы, высота и ширина будут указаны в кавычках так же, как мы использовали в двух приведенных выше стилях для абзацев. Теперь код завершен, и мы можем запустить его в коде Visual Studio через меню «Выполнить» на панели задач, а затем выбрать «начать отладку».
Вывод этого HTML-кода отображается в браузере Chrome, как показано ниже. Первые два абзаца были оформлены в пределах радиуса границы 25 пикселей и 45 пикселей соответственно. Оба абзаца содержат разные фоны с одинаковыми отступами, шириной и высотой. Вы можете видеть, что края обоих радиусов абзаца были закруглены.
Кроме того, третий абзац отображался в пределах круга радиусом 90 пикселей, а изображение, используемое в качестве фона, повторялось много раз.
Пример № 2:
Мы должны инициализировать этот пример с помощью основного тега HTML и тега заголовка. Тег title использовался для присвоения заголовка этой HTML-странице в виде «закругленных краев или углов CSS». Взглянув на тег body этого HTML-скрипта, мы обнаружили один заголовок размером 1 с простым текстовым заголовком. Эта HTML-страница содержит в общей сложности 5 абзацев с использованием тегов или элементов абзаца. Первый абзац показывает, что он будет содержать границу радиусом 50 пикселей, и будет сформирована форма затмения.
Во втором абзаце используется только идентификатор «затмение». Все остальные три абзаца содержат свои собственные определенные классы: четыре, три и два, а также несколько предложений, показывающих значения радиуса границы, используемые для создания различных затмений для определенных абзацев. Эти абзацы будут показывать общее количество углов, которые скругляются. Идентификатор «eclipse» для первого абзаца был использован для оформления первого абзаца в eclipse. Мы указываем радиус границы 50%, фон желто-зеленого цвета, отступ 10 пикселей, ширину 110 пикселей и высоту 50 пикселей для первого абзаца. Затем мы использовали класс третьего абзаца, «четыре», чтобы закруглить четыре угла абзаца. Для этого мы использовали свойство радиуса границы для верхнего, нижнего, левого и правого краев абзаца. Мы указали фон как деревянное дерево с отступом 15 пикселей, шириной 200 пикселей и высотой 40 пикселей.
Это означает, что все четыре угла или края третьего абзаца будут закруглены.
Чтобы четвертый абзац был оформлен классом «три», три его угла или края должны быть закруглены, а один оставить без изменений. Фон был указан как золотой, а отступы, ширина и высота будут такими же, как мы использовали для третьего абзаца. Мы использовали класс «два» для пятого абзаца, чтобы закруглить два его угла. Будут использоваться одни и те же отступы, ширина и высота, а цвет для этого абзаца будет другим. Первый абзац не будет отображать закругленные края, потому что он не содержит для него никакого стиля. Давайте сохраним этот HTML-скрипт и выполним его с кодом Visual Studio через параметр запуска отладки.
Вывод этой HTML-программы показывает, что первый абзац не содержит закругленных краев, потому что мы пропустили стиль этого абзаца. С другой стороны, все четыре абзаца были стилизованы, и у всех у нас есть закругленные края.
Заключение
Это все об использовании свойства радиуса границы для скругления краев любого HTML-элемента в HTML-скрипте.
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 50px;
граница-нижний-правый-радиус: 50px;
}
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 50px 25px;
граница-нижний-правый-радиус: 50px 25px;
}
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 25px 50px;
граница-нижний-правый-радиус: 25px 50px;
}
height: 5em;
ширина: 12см;
-moz-border-radius: 1em 4em 1em 4em;
радиус границы: 1em 4em 1em 4em;
}
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius: 25px 10px / 10px 25px;
радиус границы: 25px 10px / 10px 25px;
}
высота: 70 пикселей;
ширина: 70 пикселей;
-moz-border-radius: 35px;
радиус границы: 35 пикселей;
}
В этой статье мы рассмотрим эти свойства, которые делают веб-страницу более привлекательной.Вывод этого HTML-кода отображается в браузере Chrome, как показано ниже. Первые два абзаца были оформлены в пределах радиуса границы 25 пикселей и 45 пикселей соответственно. Оба абзаца содержат разные фоны с одинаковыми отступами, шириной и высотой. Вы можете видеть, что края обоих радиусов абзаца были закруглены.
Чтобы четвертый абзац был оформлен классом «три», три его угла или края должны быть закруглены, а один оставить без изменений. Фон был указан как золотой, а отступы, ширина и высота будут такими же, как мы использовали для третьего абзаца. Мы использовали класс «два» для пятого абзаца, чтобы закруглить два его угла. Будут использоваться одни и те же отступы, ширина и высота, а цвет для этого абзаца будет другим. Первый абзац не будет отображать закругленные края, потому что он не содержит для него никакого стиля. Давайте сохраним этот HTML-скрипт и выполним его с кодом Visual Studio через параметр запуска отладки.