用css3写个logo
浏览:2529次 出处信息
演示地址:http://uicss.cn/css3/maxthon-logo.html
实现方法:
- 先画一个外框 width: 240px; height: 240px;border-radius: 120px;
填充背景色background:#b1e4ff;
描边border:2px solid #789cb6;
加阴影box-shadow: 5px 5px 7px #999;
给该死的firefox3私有属性-moz-border-radius: 120px; - 再画一个小圈,width: 230px; height: 230px;border-radius: 115px;
定位,position: relative;top:5px;left:5px;
填充背景色background:#3b99e3;
给该死的firefox3私有属性-moz-border-radius: 115px; - 扔一个大白方块进去width: 150px; height: 100px;background:#ffffff;
定位position: relative;top:70px;left:42px;
右上大圆角20像素,其他小圆角border-radius: 3px 20px 3px 3px;
给该死的firefox3私有属性-moz-border-radius: 3px 20px 3px 3px; - 再扔一个白方块进去width: 35px; height: 45px;background:#ffffff;
定位position: relative;top:30px;left:33px;
粗一点的蓝色描边border:25px solid #3b99e3;
建议继续学习:
- CSS3入门——由点到面 (阅读:3626)
- CSS3 媒介判断与 iPhone 4 视网膜显示屏 (阅读:2607)
- 闲谈CSS3动画 (阅读:2518)
- 用 CSS3 Transitions 实现动画 (阅读:2294)
- CSS3开发工具收集 (阅读:2220)
- 理解CSS3线性渐变 (阅读:2221)
- CSS3 appearance简介 (阅读:2199)
- CSS3常用功能的写法 (阅读:2130)
- 揭秘HTML5和CSS3【珍珠奶茶帮】 (阅读:2051)
- CSS3圆角详解 (阅读:2029)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:信XML,得自信
文章信息
- 作者:崔凯 来源: 崔凯,前端开发
- 标签: css3 logo
- 发布时间:2011-02-16 22:14:49
建议继续学习
近3天十大热文
- [423] Go Reflect 性能
- [13] [译]Google Chrome中的高性能网
- [12] 精于图片处理的10款jQuery插件
- [11] Linux Used内存到底哪里去了?
- [11] Mac下.apk的反编译
- [10] vim入门,进阶与折腾
- [10] Linux常用系统信息查看命令
- [10] webapp网页调试工具Chrome Dev
- [10] 个人开公司的流程,以后用得着
- [10] rsync同步的艺术