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 相关文章推荐
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 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 模板高级篇总结
2006/12/21 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
python实现发送和获取手机短信验证码
2016/01/15 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
一组SQL面试题
2016/02/15 面试题
武汉某公司的C#笔试题面试题
2015/12/25 面试题
一些Unix笔试题和面试题
2012/09/25 面试题
应届生求职信写作技巧
2013/10/24 职场文书
毕业生自我鉴定
2013/11/05 职场文书
银行实习推荐信
2015/03/27 职场文书
英雄儿女观后感
2015/06/09 职场文书