您的位置 首页 css教程

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

先来看一下效果图:

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来画一个棒棒糖的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:如何使用css来画一个棒棒糖

文章地址:https://www.pyhw.net/33100_%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8css%e6%9d%a5%e7%94%bb%e4%b8%80%e4%b8%aa%e6%a3%92%e6%a3%92%e7%b3%96-2.html

关于作者: admin

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图