怎么把bootstrap中的div變成一個(gè)圓

發(fā)布時(shí)間：2020-07-09 16:20:06 來源：億速云閱讀：563 作者：Leah 欄目：web開發(fā)

怎么把bootstrap中的div變成一個(gè)圓？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

border-radius，國內(nèi)翻譯成圓角，你可能以為這個(gè)屬性就是用來畫圓角，沒錯(cuò)，但是除此之外，它還可以做點(diǎn)別的事情。

radius其實(shí)指的是邊框所在圓的半徑，這個(gè)CSS3屬性不僅能夠創(chuàng)建圓角，還可以創(chuàng)建圓形，把這些角按照不同的順序和大小來展現(xiàn)，能夠繪制成多種多樣的圖形。

利用border-radius將標(biāo)簽設(shè)置成圓形，只要將border-radius的值設(shè)置成50%，就可以變成圓形。

實(shí)例：

<html>
    <head>

    </head>
    <body style="width: 99%;height: 1000px;">
        <div style="width:100px;height:100px;background-color:#000000;border-radius:50%;"></div>
        <input type="button" style="width: 100px;height: 100px;background-color: #000000;border-radius:50%;" />
    </body>
</html>

效果圖：

怎么把bootstrap中的div變成一個(gè)圓

關(guān)于怎么把bootstrap中的div變成一個(gè)圓問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問一下細(xì)節(jié)

怎么把bootstrap中的div變成一個(gè)圓

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽