利用css画一个棒棒糖

小灰灰 2020-04-26 06:47 1092阅读 2赞

利用css画一个棒棒糖

效果图如下图：

利用css画一个棒棒糖

CSS代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>棒棒糖-蒲公英云</title>
  6. <style>
  7.  .round{
  8.     width: 100px;
  9.     height: 100px;
  10.     background-color: #e5e7e9;
  11.     position: relative;
  12.     text-align: center;
  13.     margin: 100px;
  14.     font: italic bold 17px/100px arial,sans-serif;
  15.     box-shadow: 
  16.         0 0 0 10px #4286b4,
  17.         0 0 0 20px #fc052e,
  18.         0 0 0 30px #FBDD00,
  19.         0 0 0 40px #00BDFB;
  20.     border-radius: 200px;
  21.     color: #ffffff;
  22.  }
  23.  .bangbang{
  24.     width: 20px;
  25.     height: 150px;
  26.     margin: -80px 0px 0px 142px;
  27.     background-color: #00BDFB;
  28.     border-radius: 10px;
  29.  }
  30. </style>
  31. </head>
  32. <body>
  33.     <div class="round">
  34.     蒲公英云
  35.     </div>
  36.     <div class="bangbang"></div>
  37. </body>
  38. </html>

发表评论

表情：
评论列表 （有 0 条评论，1092人围观）

还没有评论，来说两句吧...

相关阅读

    相关 如何用CSS 画一个三角形？

    这里新创建了一个专题，为自己之后的跳槽做准备，每天给自己一个小时的时间去看网上的一些面试题，并且将这些面试题的答案加上自己思考以及动手时间的内容整理成笔记，记录下来。 尤其

    怼烎@怼烎@/ 0 赞/ 462 阅读

    相关 利用css画横线或竖线

    横线： 利用css画横线，可以简单的使用<hr>标签实现，但是如果要实现左右渐变的效果的话，则需要多费一点功夫了，以下有个简单例子： html代码：（这里使用.是为了让其有

    比眉伴天荒比眉伴天荒/ 0 赞/ 584 阅读