利用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 ...
随机推荐
- 禁止手机页面中A标签长按弹出路径框
//禁止手机页面中A标签长按弹出路径框 window.onload=function(){ document.documentElement.style.webkitTouchCa ...
- Neo4j 3.0 存储过程
Neo4j 3.0 提供一个新的功能“存储过程”,该功能并不是Neo4j-Server的扩展,而是可以直接运行的. 在写这篇文章的时候,只能通过预备好的语句去执行 1 CALL package.pro ...
- IntelliJ IDEA 2016
IntelliJ IDEA 2016 注册码 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibGFuIHl1Ii ...
- 初探Backbone
Backbone简介 中文API:http://www.csser.com/tools/backbone/backbone.js.html 英文API:http://backbonejs.org/ B ...
- java 的 linq,不要再写令人讨厌的 for 了!
package com.ly.linq; import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator ...
- Java split()用法
特殊情况有 * ^ : | . \ 一.单个符号作为分隔符 String address="上海\上海市|闵行区\吴中路"; String[] splitAddress=addr ...
- biweb后台添加上传下载功能
1.数据库对应表添加字段 file varchar(100) 2.对应的后台 模块名/admin/addinfo.php里添加如下代码: //文件上传 if ((($_FILES[&quo ...
- SpringMVC文件上传注意事项
简介 我在使用 idea 上传文件时遇到一些问题,费了好些时间,最后还是的队友来帮忙. 问题出现在没有熟练使用 IDE,采用 SpringMVC 上传文件主要注意几个事项. 1. 配置 bean 在 ...
- C#WebForm内置对象
内置对象: Response对象:响应请求Response.Write("<script>alert('添加成功!')</script>");Respons ...
- 非域环境下使用证书部署数据库(SqlServer2008R2)镜像
非域环境下使用证书部署数据库(SqlServer2008R2)镜像 前言 部署数据库镜像一般有两种方式域环境下部署http://liulike.blog.51cto.com/1355103/33918 ...