我正在圍繞字體真棒圖標(biāo)創(chuàng)建一個圓圈。我的問題是，當(dāng)我添加position: absolute圓成為一個橢圓。css border-radius圓形變?yōu)闄E圓形，位置：絕對

同樣的情況，如果我是設(shè)置display: block

這里是什么，我想實現(xiàn)的圖像 -

CONRADULATIONS

YOU HAVE PASSED

You have scored 92%

DOWNLOAD YOU CERTIFICATE

CLOSE ASSESSMENT

的CSS

slide.assessment-score .score-heading{

height: 33%;

background-color: #a8db66;

border-radius: 5px 5px 0 0;

color: #ffffff;

position: relative;

}

slide.assessment-score .score-heading i{

position: absolute;

bottom: 0;

right: 0;

left: 0;

font-size: 6em;

margin-bottom: -30px;

border-radius: 50%;

padding: 1rem

background-color: black;

}

+0

你需要定義的寬度和高度絕對定位或相對它包定位div或者將定位設(shè)置為相對，并使用頂部，左側(cè)定位它 –

+1

問題不是因為你設(shè)置了'position：absolute'。這是因為你設(shè)置了'right：0'和'left：0'。這說明它占據(jù)了整個寬度。 –

+0

問題是高度寬度會改變，所以我不知道值 –

總結(jié)

以上是生活随笔為你收集整理的html设置按钮样式变为椭圆,css border-radius圆形变为椭圆形，位置：绝对的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。