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将你的设计带入下个高度
Aug 08 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 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开发者事半功倍的十大技巧小结
2010/04/20 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
在视频前插入广告
2006/11/20 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
js的回调函数详解
2015/01/05 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python时间获取及转换知识汇总
2017/01/11 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
python和JavaScript哪个容易上手
2020/06/23 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
.net工程师笔试题
2012/06/09 面试题
大学生毕业的自我鉴定
2013/11/13 职场文书
培训班主持词
2014/03/28 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
新品发布会策划方案
2014/06/08 职场文书
实验室的标语
2014/06/20 职场文书
团组织推优材料
2014/12/29 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js