使用css画一个棒棒糖？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>棒棒糖</title> <h4>用css画一个棒棒糖</h4> <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 class="round"> hello world! </div> <div class="bangbang"></div></body></html>效果图:
今天积累到的知识:
关于font的缩写
font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:1.5em;font-family:arial,verdana;可以写成:
font: italic bold 17px/100px arial,sans-serif;
17px代表:font-size
100px代表:line-height
使用简写需要注意的地方:
font-size和line-height只能通过斜杠/组成一个值，不能分开写。
顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值
关于居中
用了最简单的文字高度与div高度相同,在设置text-align:center.如果不设置font就设置line-height:100px;也是可以达到文字居中的效果
关于边框
我用的是box-shadow属性,这个属性可以设置多个值.比较适合我现在的场景.如果是值需要两层,或者一层,可以直接设置boder或者两个div嵌套或者outline属性.
看完上述内容，你们掌握使用css画一个棒棒糖的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网行业资讯频道，感谢各位的阅读！
