巧用边框:使用三个div画出一个八卦图形
来源:互联网 发布:关于宇宙的软件 编辑:程序博客网 时间:2024/05/19 23:01
话不多说,先上图分析结构
按照正常的思路,在观看这个图形的时候,我们会想到这个图形是按照五个结构来通过颜色设置和形状设定以及定位进行安装的。
这个,我们其实只要使用三个div就可以画出这个八卦图形
首先创建三个div标签:
<div id="box"> <div class="one"></div> <div class="two"></div></div>
分解:首先清除默认样式并且给body一个灰色背景有利于图形的观看:
*{ padding: 0; margin: 0; } body{ background: #ccc; }
1、外层圆形为一个div,左边白色部分为内容,右边黑色部分为右边框,其他边框均为0像素。
#box{ width: 200px; height: 400px; margin: 50px auto; background: #fff; border-right: 200px solid #000 ; border-radius: 50%; position: relative; }
2、设置黑球并且给白球一个黑边框,这里要利用边框的圆角属性,使得div为一个原型,并且要使用绝对定位属性使得该球可以出现在外框圆内的任意位置(当然这里我们要设置在中间的上边位置);另外黑球白边框也是同样的道理,只是定位一个在上面一个在下面而已,top:0;/bottom:0;(1)先设置黑白球共同样式
#box .one,#box .two{ width: 80px; height: 80px; border-radius: 50%;/*圆角属性,百分之五十为圆球*/ position: absolute; right: -100px;/*下面会给两个球都设置边框为60px,所以可视宽高都为120+80=200;应该分一半占用到外部大球的边框,分一半占用到为外部大球的内容,所以在内容的位置左移100px即可评分黑白球;*/ }
(2)分别设置黑白球的位置和边框颜色内容颜色
#box .one{ /*第一个球的上下位置不用设置,因为正常文档位置就是居顶层的*/ border: 60px solid #fff; background: #000; } #box .two{ border: 60px solid #000; background: #fff; bottom: 0;/*这里需要把球的位置设置到底部*/ }
至此,图形已经全部创建完毕。这个图形的制作需要对边框有比较灵活的应用思路,一个图形只包含两种不同表现区域的时候可以考虑使用一个元素的边框和内容来制作,当然边框的四边可以分别定义成不同的效果这样的话还可以定义一个具有五种表现区域的元素。在以后的学习和工作中遇到了再玩儿试试看~~
0 0
- 巧用边框:使用三个div画出一个八卦图形
- 用*画出一个菱形
- 使用css画出一个三角形
- View 用 Paint 画出的图形
- phpexcel画出单元格边框
- CSS画出边框三角形
- WEB前端面试题 分别使用2个、3个、5个DIV画出一个大的红十字
- 使用CAShapeLayer与UIBezierPath画出想要的图形
- 使用CAShapeLayer与UIBezierPath画出想要的图形
- 使用CAShapeLayer与UIBezierPath画出想要的图形
- 使用CAShapeLayer与UIBezierPath画出想要的图形
- 使用CAShapeLayer与UIBezierPath画出想要的图形 -- 下载进度条
- 使用CAShapeLayer与UIBezierPath画出想要的图形
- 使用CAShapeLayer与UIBezierPath画出想要的图形
- 使用CAShapeLayer与UIBezierPath画出想要的图形
- 使用CAShapeLayer与UIBezierPath画出想要的图形
- 使用CAShapeLayer与UIBezierPath画出想要的图形
- 使用CAShapeLayer与UIBezierPath画出想要的图形
- [HDU3065]病毒持续侵袭中(AC自动机)
- CH22.P438.....直接对元素和属性访问;
- 不同操作系统上屏蔽oracle的操作系统认证方式
- jQuery带筛选功能垂直导航代码-兼容IE8和Chrome浏览器
- 药店的药品销售统计系统(排序应用)
- 巧用边框:使用三个div画出一个八卦图形
- Nachos操作系统课设 浅谈优先级调度
- Android中通过ActionBar为标题栏添加搜索以及分享视窗
- 745 A. Hongcow Learns the Cyclic Shift codeforces
- 编程的好习惯--摘自知乎
- 745 B. Hongcow Solves A Puzzle codeforces
- Android群英传笔记-第3章 Android控件架构与自定义控件详解
- 745 C. Hongcow Builds A Nation codeforces (并查集)
- 《JavaScript 闯关记》之变量和数据类型