Bagaimana untuk mendapatkan garis besar bulat pada <button> bulat menggunakan CSS dalam Safari

Question

Saya cuba mendapatkan butang bulat dengan garis besar warna yang sama tetapi nampaknya tidak mungkin. Garis besar sentiasa berakhir dengan segi empat sama. Adakah terdapat cara untuk mencapai ini dengan , atau mungkin ia hanya boleh dicapai dengan ?

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>

Saya telah menambah gambar kerana ini nampaknya hanya berlaku pada Safari... Petikan skrin daripada coretan Safari

Saya memerlukannya untuk berfungsi dalam semua penyemak imbas, terutamanya pada peranti mudah alih.

Answer 1

Safari Pepijat ini dibetulkan dalam Pratonton Teknologi Safari 157. Sumber: https://webkit.org/blog/13575/release-notes-for-safari-technology-preview-157/

Answer 2

Anda boleh menggunakan "godam" ini.

Maklumat: Dalam penyemak imbas Brave, coretan anda juga muncul sebagai segi empat sama

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;
}