Home  >  Article  >  Web Front-end  >  How to draw a lollipop using css

How to draw a lollipop using css

王林
王林forward
2020-04-24 09:15:113866browse

How to draw a lollipop using css

Let’s take a look at the renderings first:

How to draw a lollipop using css

(recommended related video tutorials: css video tutorial)

CSS code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>棒棒糖</title>
    <h3>用css画一个棒棒糖</h3>

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

Recommended tutorial: css quick start

The above is the detailed content of How to draw a lollipop using css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete