我試圖獲得一個(gè)具有相同顏色輪廓的圓形按鈕,但這似乎不可能。輪廓最終總是呈現(xiàn)正方形。有沒有一種方法可以用 a 來(lái)實(shí)現(xiàn)這一點(diǎn),或者它可能只能用 a 來(lái)實(shí)現(xiàn)?
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>
我新增了一張圖片,因?yàn)檫@似乎只發(fā)生在 Safari 上...來(lái)自 Safari 片段的螢?zāi)唤貓D
我需要它在所有瀏覽器中工作,尤其是在行動(dòng)裝置上。
Safari 在 Safari 技術(shù)預(yù)覽版 157 上修復(fù)了此錯(cuò)誤。資料來(lái)源:https://webkit.org/blog/13575/release-notes-for-safari-technology-preview-157/
#你可以使用這個(gè)「駭客」。
訊息:在 Brave 瀏覽器中,您的程式碼片段也出現(xiàn)了一個(gè)正方形;
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; }