利用border-radious画图形
今天才发现,border-radius可以画很多图形,下面跟我来看一下吧:
在设有宽和高的情况下画一个圆:
#div1{
/*宽高相等,圆角范围为高或宽的一半或以上*/
background-color: green;
width: 120px;
height: 120px;
border-radius: 60px;
}
运行结果:
当宽和高不相等的时候:
#div1{
/*宽大于高,圆角范围为宽的一半或以上*/
background-color: green;
width: 120px;
height: 80px;
border-radius: 60px;
}
结果:
因为border-radius可以接受不同的参数,我们可以利用这个画一个椭圆:
#div1{
/*border-radius接受水平和垂直方向不同的值,用/隔开*/
background-color: green;
width: 120px;
height: 80px;
border-radius: 60px/40px;
}
结果:
一个椭圆就出现了。
以上的方法画圆和椭圆很不灵活,如果宽度和高度改变,形状也会发生改变,我们想用灵活的方式画出我们想要的图形,就要用到百分比了:
#div1{
/*border-radius接受百分比,用/隔开 灵活的椭圆*/
background-color: green;
width: 200px;
height: 300px;
/*等同于border-radius: 50%/50%;*/
border-radius: %;
}
结果:
还可以通过修改border-radius的值实现半个圆或椭圆的图形:
#div1{
/*border-radius半椭圆*/
background-color: green;
width: 100px;
height: 100px;
/*等同于border-radius: 水平半径/垂直半径;*/
border-radius: %/% % ;
}
运行结果:
#div1{
/*border-radius半椭圆*/
background-color: green;
width: 100px;
height: 100px;
/*等同于border-radius: 水平半径/垂直半径;*/
border-radius: % %/%;
}
结果:
四分之一的椭圆也是可以的哦:
#div1{
/*border-radius 1/4半椭圆*/
background-color: green;
width: 100px;
height: 100px;
/*等同于border-radius: 水平半径/垂直半径;*/
border-radius: % /%;
}
结果:
#div1{
/*border-radius 1/4半椭圆*/
background-color: green;
width: 100px;
height: 100px;
/*等同于border-radius: 水平半径/垂直半径;*/
border-radius: % /%;
}
结果:
绘制其他图形:
#div1{
/*border-radius半椭圆*/
background-color: green;
width: 100px;
height: 100px;
/*等同于border-radius: 水平半径/垂直半径;*/
border-radius: % % /%;
}
#div1{
/*border-radius半椭圆*/
background-color: green;
width: 100px;
height: 100px;
/*等同于border-radius: 水平半径/垂直半径;*/
border-radius: % % /%;
}
运行结果:
#div1{
/*border-radius半椭圆*/
background-color: green;
width: 100px;
height: 100px;
/*等同于border-radius: 水平半径/垂直半径;*/
border-radius: % % % /%;
}
大家可以自己修改border-radius的值去看看会产生哪些图形,这里我就不再写了。
利用border-radious画图形的更多相关文章
- 利用js来画图形(例如:条状图,圆饼图等)
背景:java开发的过程中,需要对数据进行可视化,这样方便客户理解此时的数据状态 语言:java,js,window7,echarts包文件 sample的例子下面的参照 https://www.ec ...
- 利用border和伪类画出三角形 ps:好久没写博客了。。。
有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...
- matlab画图形函数 semilogx
matlab画图形函数 semilogx loglog 主要是学习semilogx函数,其中常用的是semilogy函数,即后标为x的是在x轴取对数,为y的是y轴坐标取对数.loglog是x y轴都取 ...
- PyQt5利用QPainter绘制各种图形
这个例子我做了好几天: 1)官网C++的源码,改写成PyQt5版本的代码,好多细节不会转化 2)网上的PyQt的例子根本运行不了 填了无数个坑,结合二者,终于能完成了一个关于绘图的东西.这个过程也掌握 ...
- WebGl 利用缓冲区对象画多个点
效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- openlayers画图形返回范围
//画图形返回圖形的范围 var polygonLayer = new OpenLayers.Layer.Vector("选择范围"); var drawControls = ne ...
- 利用border制作三角形原理
网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...
- Java编写画图板程序细节-保存已画图形
没有Java编写画图板程序细节-保存已画图形 一.为何我们要保存画图板上已画图形呢? 有很多人会问,为什么我们一定要保存画图板上已经画好了的图形呢?原因很简单.当我们在画图板上画完自己想画的图形后 ...
- 利用QPainter绘制各种图形(Shape, Pen 宽带,颜色,风格,Cap,Join,刷子)
利用QPainter绘制各种图形 Qt的二维图形引擎是基于QPainter类的.QPainter既可以绘制几何形状(点.线.矩形.椭圆.弧形.弦形.饼状图.多边形和贝塞尔曲线),也可以绘制像素映射.图 ...
- CSS深入了解border:利用border画三角形等图形
三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~! <!DOCTYPE html> <html la ...
随机推荐
- 7 -- Spring的基本用法 -- 6...
7.6 Spring 3.0 提供的Java配置管理 Spring 允许使用Java类进行配置管理,可以不使用XML来管理Bean,以及Bean之间的依赖关系. Interface :Person p ...
- Flask-admin使用经验技巧总结
笔者是看狗书入门的flask,狗书上对于flask-admin这个扩展并没有进行讲解,最近因为项目需要,学习使用flask-admin,瞬间体会到了flask开发的快速.扩展的强大 Flask-adm ...
- 使用caffe时遇到的问题
1.Error: (unix time) try if you are using GNU date 问题所在: 在训练train.txt图片列表位置和生成的lmbd数据不符. 解决方案: 修改tra ...
- 自己写的一个SqlHelper,感觉使用起来挺方便的
自己写的一个SqlHelper,感觉使用起来挺方便的 using System; using System.Data; using System.Collections.Generic; using ...
- Meteor常用技能
调试: 服务器端 console.log() 会输出到终端命令行 客户端的 console.log() 会输出到浏览器控制台 Mongo Shell: 启动方式:meteor mongo 清空数据:m ...
- CSS3 仿微信聊天小气泡
今天给大家分享一个我刚做的项目中的一个小案例, 因为我们在做一个聊天的功能,之前的聊天页面UI很丑,我就不在这里展示给大家了. 现在就教大家怎么用css3制作一个和微信聊天界面一样的页面. 首先给大家 ...
- CentOS 6中MATLAB print函数“所见非所得”bug的解决方案
0 系统配置+软件版本 主机:Dell optiplex 390 MT (i5) 系统+软件:CentOS 6.5 x64, Matlab R2012, R2013 系统+软件:CentOS 6.7 ...
- RP4412开发板在Android系统编译生成ramdisk-uboot.img
荣品RP4412开发板在android系统编译的时候,怎么生成ramdisk-uboot.img生成流程分析: mkimage -A arm -O linux -T ramdisk -C none - ...
- EXE加锁器 只是思路
代码有点乱 但是我不想整理 // AddBoxDlg.cpp : 实现文件 // #include "stdafx.h" #include "AddBox.h" ...
- 【软件】【diamond】-管脚分配
未用到的引脚设置,浮空引脚设置.可以设置浮空电压