如何删除元素周围这个奇怪的轮廓？

Question

我在这种样式的按钮周围出现了奇怪的轮廓。为什么会这样。下面是代码：

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Button</title>
        <style>
          button {
            padding: 1em;
            background: transparent;
            border: none;
          }
          button:focus {
            border-radius: 6px;
            outline: none;
            box-shadow: 0 0 0 2px white, 0 0 0 4px blue;
          }
        </style>
      </head>
      <body>
        <button>Button</button>
      </body>
    </html>

Answer 1

因为插值多个阴影。只需使用其中一个即可

button {
  padding: 1em;
  background: transparent;
  border: none;
}
button:focus {
  border-radius: 6px;
  outline: none;
  box-shadow: 0 0 0 2px blue;
}

<button>Button</button>

如何删除元素周围这个奇怪的轮廓？

问题描述投票：0回答：1

1个回答

最新问题

如何删除元素周围这个奇怪的轮廓？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1