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 相关文章推荐
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 16 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
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
php中Snoopy类用法实例
2015/06/19 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
解决python selenium3启动不了firefox的问题
2018/10/13 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
企业精细化管理实施方案
2014/03/23 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
入股协议书范本
2014/11/01 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
2015党建工作简报
2015/07/21 职场文书
小学校园广播稿
2015/08/18 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
MySQL优化之慢日志查询
2022/06/10 MySQL