css3.0 图形构成实例练习一


Posted in HTML / CSS onMarch 19, 2013

html部分内容

复制代码
代码如下:

<div class="header">

<div class="eye_left"></div>

<div class="eye_right">

<div class="eye_in"></div>

</div>

<div class="head_bottom"></div>
</div>


css部分
复制代码
代码如下:

*{ padding:0; margin:0;}
.header{ width:300px; margin:100px auto; position:relative; }
.eye_left,.eye_right{

width:30px;

height:30px;

background:#FFF;

position:absolute;

border:70px solid #0C0;

border-radius:160px;

-moz-border-radius:160px;

-webkit-border-radius:160px;

-o-border-radius:160px;}
.eye_left{

left:10px;

top:0px;}
.eye_right{

right:0px;

top:0px;}
.head_bottom{

width:200px;

border:#0C0 solid 60px;

border-radius:160px;

-moz-border-radius:160px;

-webkit-border-radius:160px;

-o-border-radius:160px;

height:30px;

left:0px;

position:absolute;

top:120px;

z-index:-5;}
.eye_in{

background:#0C0;

height:30px;

width:30px;

position:absolute;

right:-30px;

top:-30px;

border:#FFF 30px solid;

border-radius:160px;

-moz-border-radius:160px;

-webkit-border-radius:160px;

-o-border-radius:160px;}

HTML / CSS 相关文章推荐
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
css3 border-image使用说明
Jun 23 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 #HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
Mar 18 #HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 #HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 #HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 #HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 #HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 #HTML / CSS
You might like
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
RequireJs的使用详解
2017/02/19 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
优化Python代码使其加快作用域内的查找
2015/03/30 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
python实现网页录音效果
2020/10/26 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
科室工作个人总结的自我评价
2013/10/29 职场文书
财务与信息服务专业推荐信
2013/11/28 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
综合素质评价自我评价
2015/03/06 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle