So erhalten Sie mit CSS in Safari einen kreisförmigen Umriss auf einer kreisförmigen <Schaltfläche>

Question

Ich versuche, einen runden Knopf mit der gleichen Umrissfarbe zu bekommen, aber das scheint nicht möglich zu sein. Der Umriss ist am Ende immer quadratisch. Gibt es eine Möglichkeit, dies mit einem zu erreichen, oder kann es möglicherweise nur mit einem erreicht werden?

button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  background-color: black;
  display: inherit;
  outline: 5px solid black;
  outline-offset: 5px;
}

<button></button>

Ich habe ein Bild hinzugefügt, da dies anscheinend nur in Safari passiert ... Screenshot aus dem Safari-Snippet

Ich brauche es, damit es in allen Browsern funktioniert, insbesondere auf Mobilgeräten.

Answer 1

Safari 在 Safari 技术预览版 157 上修复了此错误。来源：https://webkit.org/blog/13575/release-notes-for-safari-technology-preview-157/

Answer 2

你可以使用这个“黑客”。

信息：在 Brave 浏览器中，您的代码片段也出现了一个正方形；

button {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  background-color: black;
  display: inherit;
  margin:10px 2px;
}

button::after {
  position: absolute;
  top: -10px;
  content: '';
  left: -10px;
  width: 50px;
  height: 50px;
  border: 5px solid black;
  border-radius: 40px;
  background-color: transparent;
  display: inherit;
}