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中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
php include类文件超时问题处理
2015/02/06 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
PHP chr()函数讲解
2019/02/11 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
vue实现文件上传功能
2018/08/13 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
微信小程序实现搜索历史功能
2020/03/26 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
python中map()函数的使用方法示例
2017/09/29 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
pandas如何处理缺失值
2019/07/31 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
高考考python编程是真的吗
2020/07/20 Python
求职自荐信范文格式
2013/11/29 职场文书
医院实习介绍信
2014/01/12 职场文书
房屋授权委托书范本
2014/10/07 职场文书
网站出售协议书范文
2014/10/10 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL