用css3写个logo
浏览:2534次 出处信息
演示地址: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入门——由点到面 (阅读:3634)
- CSS3 媒介判断与 iPhone 4 视网膜显示屏 (阅读:2611)
- 闲谈CSS3动画 (阅读:2524)
- 用 CSS3 Transitions 实现动画 (阅读:2300)
- CSS3开发工具收集 (阅读:2222)
- 理解CSS3线性渐变 (阅读:2231)
- CSS3 appearance简介 (阅读:2207)
- CSS3常用功能的写法 (阅读:2135)
- 揭秘HTML5和CSS3【珍珠奶茶帮】 (阅读:2058)
- CSS3圆角详解 (阅读:2035)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:信XML,得自信
文章信息
- 作者:崔凯 来源: 崔凯,前端开发
- 标签: css3 logo
- 发布时间:2011-02-16 22:14:49
建议继续学习
近3天十大热文
- [706] WEB系统需要关注的一些点
- [323] 如何拿下简短的域名
- [18] 移动音乐产品梳理
- [15] 豆瓣是啥?
- [14] 内存的惰性初始化
- [14] Perl 的线程中的共享
- [13] UMStor Hadapter:大数据与对象
- [13] 一个 VLA (可变长度数组)的实现
- [12] 为什么工程师会造出蹩脚的产品
- [12] iOS和Android设计规范备忘表