Внутренний радиус-радиус ячейки таблицы - PullRequest
Новая
       21

Внутренний радиус-радиус ячейки таблицы

1 голос
/ 31 марта 2020

Я пытаюсь создать фоторамку с таблицей HTML и некоторыми CSS. Я хочу добавить к нему внутреннюю границу-радиус, но не могу найти способ закрасить «края» (пробелы между «нормальной границей» и «границей с радиусом»).

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

table {
  border-spacing: 0;
  background-color: aqua;
}
td {
    border: solid 1px red;
    padding: 50px;
    background-color: red;
}
td.middle {
  border-radius: 50px;
  border: 1px solid green;
  background-color: transparent;
}
tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }
<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td class="middle">2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

Ответы [ 2 ]

1 голос
/ 31 марта 2020

вам нужно рассмотреть новый элемент внутри td
, если будет изображение, вам не понадобится span внутри вашего div 

table {
  border-spacing: 0;
  background-color: aqua;
}
td {
    border: solid 1px red;
    padding: 50px;
    background-color: red;
}

td.middle {
  padding: 0px;
}
#center_frame{
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50px;
  border: 1px solid green;
      border: solid 1px red;
    background-color: lightblue;
    text-align: center;
}

#center_frame span {
  line-height: 100px;
}
tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }
<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td class="middle">
      <div id="center_frame"><span>2.2</span></div>
    </td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>
0 голосов
/ 31 марта 2020

Используйте radial-gradient для этого 

table {
  border-spacing: 0;
  background-color: aqua;
}

td {
  border: solid 1px red;
  padding: 50px;
  background-color: red;
}

td.middle {
  background:radial-gradient(farthest-side,transparent 99%,red 100%);
}

tr:first-child td {
  border-top-style: solid;
}

tr td:first-child {
  border-left-style: solid;
}
<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td class="middle">2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

Для произвольного радиуса вам понадобится 4 градиента: 

table {
  border-spacing: 0;
  background-color: aqua;
}

td {
  border: solid 1px red;
  padding: 50px;
  background-color: red;
}

td.middle {
  background:
    radial-gradient(farthest-side at bottom left, transparent 98%,red 100%) top    right,
    radial-gradient(farthest-side at bottom right,transparent 98%,red 100%) top    left,
    radial-gradient(farthest-side at top    left, transparent 98%,red 100%) bottom right,
    radial-gradient(farthest-side at top    right,transparent 98%,red 100%) bottom left;
  background-size:25% 25%; /* adjust this to control the radius (from 0% to 50% or pixel value)  */
  background-repeat:no-repeat;
}

tr:first-child td {
  border-top-style: solid;
}

tr td:first-child {
  border-left-style: solid;
}
<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td class="middle">2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>
...