css3简单练习实现遨游浏览器logo的绘制


Posted in HTML / CSS onJanuary 30, 2013

原来CSS3是这么回事,抓紧学啊
css3简单练习实现遨游浏览器logo的绘制

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>CSS3</title>
<style type="text/css">
* {margin:0; padding:0}
.main {width:800px; margin:110px auto 0}
.main_wrapper {width:240px; height:240px; border-radius:120px; background:#B1E4FF; border:2px solid #789CB6; box-shadow:5px 5px 7px #999}
.main_wrap {width:230px; height:230px; border-radius:115px; position:relative; top:5px; left:5px; background:#3B99E3}
.white_1 {width:150px; height:100px; background:#FFF; position:relative; left:42px; top:70px; border-radius:3px 20px 3px 3px}
.white_2 {width:35px; height:45px; background:#FFF; position:relative; left:33px; top:30px; border:25px solid #3B99E3}
</style>
</head>
<body>
<div class="main">
<div class="main_wrapper">
<div class="main_wrap">
<div class="white_1">
<div class="white_2"></div>
</div>
</div>
</div>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 #HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 #HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 #HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 #HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 #HTML / CSS
css3 box-sizing属性使用参考指南
Jan 08 #HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 #HTML / CSS
You might like
用libtemplate实现静态网页生成
2006/10/09 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
Python发送邮件实现基础解析
2020/08/14 Python
Python自动登录QQ的实现示例
2020/08/28 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
大学学习生活感言
2014/01/18 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
党员三严三实心得体会
2014/10/13 职场文书
2014年技术部工作总结
2014/12/12 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
Mysql如何查看是否使用到索引
2022/12/24 MySQL