本文摘自PHP中文网,作者藏色散人,侵删。
css3画圆的实现方法:首先创建一个HTML示例文件;然后定义一个div,并命名为“circle”;最后通过css属性“border-radius”使div实现圆的效果即可。
本教程操作环境:Dell G3电脑、Windows7系统、HTML5&&CSS3版本。
推荐:《css视频教程》
css已经越来越强大了 ,可以使用它来绘制各种简单的形状,用于代替图片显示,这次的分享主要用到画圆,扇形。
实现圆形
1 2 3 4 5 6 7 8 9 |
|
效果如下:
border-radius圆角的四个值按顺序取值分别为:左上、右上、右下、左下。这里只设置一个值,代表四个角的取值都为为50%
原理:
border-radius: 50% 弯曲元素的边框以创建圆。
由于圆在任何给定点具有相同的半径,故宽和高都需要保证一样的值,不同的值将创建椭圆。
实现扇形
利用border-radius,实现90度角的扇形:
1 2 3 4 5 6 7 8 9 |
|
效果如下:
原理:
左上角是圆角,其余三个角都是直角:左上角的值为宽和高一样的值,其他三个角的值不变(等于0)。
绘制任意角度的扇形
效果如下:
/绘制一个60度扇形/
/绘制一个85度扇形/
/绘制一个向右扇形,90度扇形/
/*绘制一个颜色扇形 */
/*绘制一个不同颜色半圆夹角 */
完整代码如下:
相关阅读 >>
html5+CSS3实现无插件拖拽上传图片(支持预览与批量)的详情介绍
更多相关阅读请进入《CSS3》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者