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中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 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
德劲1104的电路分析与改良
2021/03/01 无线电
PHP nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
PHP中使用BigMap实例
2015/03/30 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
Python构造函数及解构函数介绍
2015/02/26 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python实现淘宝购物系统
2019/10/25 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
班组长安全生产职责
2013/12/16 职场文书
技术员岗位职责
2015/02/04 职场文书
领导干部失职检讨书
2015/05/05 职场文书
小学生法制教育心得体会
2016/01/14 职场文书