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 object-fit属性
Jul 27 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP CURL使用详解
2019/03/21 PHP
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
python关闭windows进程的方法
2015/04/18 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
django admin组件使用方法详解
2019/07/19 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
远程教育心得体会
2014/01/03 职场文书
先进个人事迹材料
2014/01/25 职场文书
黄河的主人教学反思
2014/02/07 职场文书
岗位说明书范文
2014/05/07 职场文书
环境卫生标语
2014/06/09 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
迎七一演讲稿
2014/09/12 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技