利用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 ...
随机推荐
- HBase 安装
HBase 集群安装 1.上传tar包,解压tar包 tar -zxvf hbase-1.1.5-bin.tar.gz 2.修改配置文件 进入 hbase/conf/ 在文件 regionserve ...
- centos7安装redis
方法一:使用命令安装(前提是已经安装了EPEL). 安装redis: yum -y install redis 启动/停止/重启 Redis 启动服务: 1 systemctl start redis ...
- 11.10 Taolu1234组信息汇总
团队名称: Taolu1234 团队选题: <餐厅到店点餐系统>WEB版 团队博客地址: http://www.cnblogs.com/queenjuan/ 团队GITHUB地址: htt ...
- 删除Kafka的topic
刚接触Kafka,开始认为删除一个topic只是运行一下Kafka-topic.sh的delete命令就行了,但是,事实却不是这样,会出现两种情况:(1) 如果topic没有使用过即没有传输过消息,可 ...
- [iOS]浅谈NSRunloop工作原理和相关应用
一. 认识NSRunloop 1.1 NSRunloop与程序运行 那么具体什么是NSRunLoop呢?其实NSRunLoop的本质是一个消息机制的处理模式.让我们首先来看一下程序的入口——main ...
- 关于classList的API
<body class="a b c"> ...... </body> document.body.classList可以取得body的classList属 ...
- SPI 驱动分析
断更博客两个月后我又回来了,眯着躺倒就能睡熟的小眼睛,在这儿敲键盘.这篇文章给你快乐,你有没有爱上我! SPI驱动由三部分组成,分别为drivers.core.device.通过bus总线连接.困了不 ...
- Java8之——简洁优雅的Lambda表达式
Java8发布之后,Lambda表达式,Stream等等之类的字眼边慢慢出现在我们字眼.就像是Java7出现了之后,大家看到了“钻石语法”,看到了try-with-resource等等.面对这些新东西 ...
- textbox button 模拟fileupload
方案一: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.asp ...
- ubuntu - 中文
首先要从Ubuntu语言设置那里,把中文语言包安装上 打开/etc/environment 在下面添加如下两行 LANG="zh_CN.UTF-8″ LANGUAGE="zh_CN ...