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

前端  /  管理员 发布于 8年前   317

先来看一下效果图：

7e47e89da1cf0975e765f773e6d4953.png

（相关视频教程推荐：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来画一个棒棒糖的详细内容，更多请关注其它相关文章！


  • 上一条：
    详细介绍js中的变量提升机制
    下一条：
    如何利用js实现音乐导航效果

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客