css 如何在一个数字周围画一个圆圈而不移动它？

0aydgbwb 于 2023-03-24 发布在其他

关注(0)|答案(3)|浏览(155)

有很多使用border-radius在数字周围画圆的例子。然而，我遇到的问题是我正在按列和行显示数字（在一个表中）来形成一个日历，当我添加一个类来使用这个方法在选定的日期周围放一个圆圈时，它会移动数字。我发现自己不得不摆弄填充之类的东西，才能把圆圈放在正确的位置，把数字正确地集中在圆圈的中心。然后它只适用于我设置的精确大小。如果有人说“你能把那个字体调大/调小一点吗”，那么我就会再经历一次这个反复试验的过程。
那么，我怎样才能在不移动数字的位置的情况下，在一个数字周围画一个圆呢？

css

来源：https://stackoverflow.com/questions/75815934/how-to-draw-a-circle-around-a-number-without-moving-it

3条答案

按热度按时间

jogvjijk1#

你可以使用的一个技巧是一个透明的“光环”的CSS径向渐变：

td {
  width: 3em;
  height: 3em;
  border: 1px solid silver;
  padding: 0;
  text-align: center;
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(17, 17, 121, 0) 65%, rgba(9, 9, 116, 1) 66%, rgba(9, 9, 121, 0) 70%, rgba(255, 255, 255, 0) 100%);
  background-size: 100% 100%;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>64</td>
  </tr>
</table>

赞(0）回复(0）举报 2023-03-24

bvuwiixz2#

您可以通过使用CSS ::before或::after伪元素沿着position: absolute;的组合来实现这一点。

body {
  font-family: Arial, sans-serif;
}

table {
  border-collapse: collapse;
}

td {
  padding: 20px;
  text-align: center;
  position: relative;
}

.number {
  display: inline-block;
}

.number.selected::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid black;
  border-radius: 50%;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Circle Around Number</title>
</head>
<body>
  <table>
    <tr>
      <td><span class="number">1</span></td>
      <td><span class="number">2</span></td>
      <td><span class="number">3</span></td>
    </tr>
    <tr>
      <td><span class="number">4</span></td>
      <td><span class="number selected">5</span></td>
      <td><span class="number">6</span></td>
    </tr>
    <tr>
      <td><span class="number">7</span></td>
      <td><span class="number">8</span></td>
      <td><span class="number">9</span></td>
    </tr>
  </table>
</body>
</html>

赞(0）回复(0）举报 2023-03-24

w8biq8rn3#

在不了解你的HTML的具体细节的情况下，我建议使用::after伪类。这样做，我们在数字“后面”画了一个圆，但是在绝对位置上，我们将其置于td的中心。由于数字也位于td的中心，我们有一个完美的圆围绕着我们的数字。

td {
  width: 3em;
  height: 2em;
  text-align: center;
  padding: 5px 0;
}
.circled {
  position: relative;
}
.circled::after {
  content: "";
  position: absolute;
  width: 2em;
  height: 2em;
  border: 1px solid red;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td class="circled">5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td class="circled">11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
    </tr>
    <tr>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
      <td>19</td>
      <td>20</td>
      <td class="circled">21</td>
    </tr>
    <tr>
      <td class="circled">22</td>
      <td>23</td>
      <td>24</td>
      <td>25</td>
      <td>25</td>
      <td>27</td>
      <td>28</td>
    </tr>
  </tbody>
</table>

赞(0）回复(0）举报 2023-03-24

我来回答

css 如何在一个数字周围画一个圆圈而不移动它？

3条答案

相关问题

热门标签

最新问答