html如何绘制棒棒糖,如何使用css来画一个棒棒糖

先来看一下效果图：

(相关视频教程推荐：css视频教程)

CSS代码：

棒棒糖

用css画一个棒棒糖

要求:

1:棒棒糖中间文字为水平居中

2:不得少于三层颜色

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

}

hello world!

推荐教程：css快速入门