Фон с закруглением для тэга <tr>

Фон в полоску с помощью CSS

Ячейка с закругленными краями выглядит эффектно и часто сильно добавляет карме к интерфейсу сайта. Закругления добавляют элементу мягкости, создают ощущение гармонии. В современных дизайнах закругленные углы часто используются, чтобы придать интерфейсам и объектам более современный и стильный вид.

В html для закругления я обычно добавляю в стили border-radius и добиваюсь нужного эффекта, например так:

.inputBox {
  width: 250px;
  padding: 10px;
  border: #000 1px solid;
  background: #EEE;
  border-radius: 5px;
  outline: none;
  color: #000;
  font-size: 1em;
}

Недавно я хотел сделать html-таблицу, строки которой были бы с закругленным фоном. По наитию хотел добавить в стили свойство border-radius для тэга <tr>, но оказалось, что для тэга <tr> свойство border-radius не работает.

Выход оказался чуть сложней, но не скажу, что сильно усложнил решение.

Вариант 1. Использование псевдо-элементов в CSS

tr.round {
    background-color: cadetblue;
}
tr.round td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
 }
tr.round td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

Другой способ стал для меня открытием - через свойство clip-path

.cliprow {
    background-color: brown;
    clip-path: xywh(0 0 100% 100% round 10px);
    border-radius: 10px,
}

Выглядит вот так:

# Name Score
1 User 1 3
2 User 2 4
3 User 3 38


Комментариев нет »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment




Array



MarkiMarta.ru. Записки отца-программиста" с 2009 г.
Категория информационной продукции 18+
Яндекс.Метрика