Question

是否可以调整单击CSS按钮时出现的轮廓？单击圆形按钮时，轮廓看起来稍微有点偏离了。

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .button {
      border-radius: 80%;
      padding: 16px 32px;
    }
  </style>
</head>

<body>
  <button class="button">BUTTON</button>
</body>

</html>

Answer 1

当按钮成为焦点（或处于活动状态）时，您可以更改现有边框的宽度-您还可以根据需要更改其颜色或样式（山脊等）。

.button:focus, .button:active {
    outline-style:none;
    border-width: 5px;
    border-color: black;
    border-style: solid;
} 
        .button {
          border-radius: 80%;
          padding: 16px 32px;
        }

      <button class="button">BUTTON</button>

Answer 2

在按钮的焦点上覆盖轮廓行为。

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .button {
      border-radius: 80%;
      padding: 16px 32px;
    }
    .button:focus {
      outline: none;
      box-shadow: 0px 4px 7px 0px #888888;
    }
  </style>
</head>

<body>
  <button class="button">BUTTON</button>
</body>

</html>

Answer 3

我不知道要“成形”，但是我敢肯定您可以使用outline: none;禁用轮廓，您可以仅在活动，聚焦和悬停时使用此属性，以查看其是否有效。

有没有一种方法可以根据按钮形状来“成形” CSS按钮轮廓？

3 个答案: