使用css畫一個棒棒糖的代碼分享

發(fā)布時間：2020-05-19 14:42:57 來源：億速云閱讀：1038 作者：小新欄目：web開發(fā)

這篇文章主要為大家詳細(xì)介紹了使用css畫一個棒棒糖的代碼分享，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

先來看一下效果圖：

使用css畫一個棒棒糖的代碼分享

CSS代碼：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>棒棒糖</title>
    <h4>用css畫一個棒棒糖</h4>

    <p>要求:</p>
    <p>1:棒棒糖中間文字為水平居中</p>
    <p>2:不得少于三層顏色</p>
<style>
 .round{
    width: 100px;
    height: 100px;
    background-color: #e5e7e9;
    position: relative;
    text-align: center;
    margin: 100px;
    font: italic bold 17px/100px arial,sans-serif;
    box-shadow: 
        0 0 0 10px #4286b4,
        0 0 0 20px #fc052e,
        0 0 0 30px #FBDD00,
        0 0 0 40px #00BDFB;
    border-radius: 200px;
    color: #ffffff;
 }
 .bangbang{
    width: 20px;
    height: 150px;
    margin: -80px 0px 0px 142px;
    background-color: #00BDFB;
    border-radius: 10px;
 }
</style>
</head>
<body>
    <div>
    hello world!
    </div>
    <div></div>
</body>
</html>

關(guān)于使用css畫一個棒棒糖的代碼就分享到這里了，希望以上內(nèi)容可以對大家有一定的參考價值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。

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

使用css畫一個棒棒糖的代碼分享

猜你喜歡

最新資訊

相關(guān)推薦

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