如何使用css来画一个棒棒糖

互联网 20-4-24

先来看一下效果图：

（相关视频教程推荐：css视频教程）

CSS代码：

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

推荐教程：css快速入门

以上就是如何使用css来画一个棒棒糖的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： css