css画一个棒棒糖的实例代码
2019-08-29 15:38
375 查看
背景:每天进步一点点,多积累一点点.就会越来越棒
代码:
<!doctype html> <html lang="en"> <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 class="round"> hello world! </div> <div class="bangbang"></div> </body> </html>
效果图:
今天积累到的知识:
1:关于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
使用简写需要注意的地方:
1:font-size和line-height只能通过斜杠/组成一个值,不能分开写。
2:顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值
2:关于居中
用了最简单的文字高度与div高度相同,在设置text-align:center.如果不设置font就设置line-height:100px;也是可以达到文字居中的效果
3:关于边框
我用的是box-shadow属性,这个属性可以设置多个值.比较适合我现在的场景.如果是值需要两层,或者一层,可以直接设置boder或者两个div嵌套或者outline属性.
总结
以上所述是小编给大家介绍的css画一个棒棒糖的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关文章推荐
- 整理文档,搜刮出一个vue2.0的contextmenu右键弹出菜单的实例代码
- 一个 Makefile 实例,用于编译各多个子目录测试代码
- Ext通过按钮创建一个Window实例代码
- 一个调查实例包括全部代码
- 一个调查实例包括全部代码
- 20行代码实现的一个CSS覆盖率测试脚本
- 一个DIV+CSS代码布局的简单导航条
- UNIX-LINUX编程实践教程->第八章->实例代码注解->写一个简单的shell->在shell中启动另一个程序
- DIV+CSS高度自适应方法网页代码实例
- C语言计算一个结构体内成员地址的偏移量的两种方法(代码实例)
- html、css和jquery相结合实现简单的进度条效果实例代码
- 一个反编译看代码的途径和android6.0权限控制实例
- 判断输入的一个数是否为回文数c++代码实例及运行结果
- pycharm+django创建一个搜索网页实例代码
- 网页标准化:CSS代码缩写精简实例
- 一个简单的动态加载js和css的jquery代码
- 一个新的CSS菜单代码
- 一个调查实例包括全部代码
- 简单的一个CSS菜单,不用图片也很好看_网页代码站(www.webdm.cn)
- java实现一个扫描包的工具类实例代码