css3画圆的实现方法:首先创建一个HTML示例文件;然后定义一个div,并命名为“circle”;最后通过css属性“border-radius”使div实现圆的效果即可。
本教程操作环境:Dell G3电脑、Windows7系统、HTML5&&CSS3版本。
推荐:《css视频教程》
css已经越来越强大了 ,可以使用它来绘制各种简单的形状,用于代替图片显示,这次的分享主要用到画圆,扇形。
实现圆形
效果如下:
border-radius圆角的四个值按顺序取值分别为:左上、右上、右下、左下。这里只设置一个值,代表四个角的取值都为为50%
原理:
border-radius: 50% 弯曲元素的边框以创建圆。
由于圆在任何给定点具有相同的半径,故宽和高都需要保证一样的值,不同的值将创建椭圆。
实现扇形
利用border-radius,实现90度角的扇形:
效果如下:
原理:
左上角是圆角,其余三个角都是直角:左上角的值为宽和高一样的值,其他三个角的值不变(等于0)。
绘制任意角度的扇形
效果如下:
/绘制一个60度扇形/
/绘制一个85度扇形/
/绘制一个向右扇形,90度扇形/
/*绘制一个颜色扇形 */
/*绘制一个不同颜色半圆夹角 */
完整代码如下:
以上是css3 如何画圆的详细内容。更多信息请关注PHP中文网其他相关文章!