CSS画基本图形——圆

#cicle {
            width: 100px;
            height: 100px;
            background-color: #000;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px;
        }

实验表明 border-radius 只要是大于 height 或width 的1/2就能成圆形

另外:

#circle{
            height: 100px;
            width: 100px;
            border-radius: 100px;
            border: 50px solid #f21;
        }

这样可以画出一个中间是空的圆:

说明(一):

border 的宽度不能超过 height 或width 的1/2,否则圆会越来越变形。

因此可以说明 : border-radius 是从 border 开始,随着 border-radius 增大,圆心逐渐向 块级元素的中点靠近,当 border-radius 等于 块级元素 height 或 width 的一半时,圆心和块级元素的中点重叠,此后再增大 border-radius 也不会有改变了。

当 border 宽度大的时候,就涉及到了 border-radius 圆弧的边界是 border 的外层还是内层的问题,如下面:

#circle{
            height: 100px;
            width: 100px;
            border-radius: 50px;
            border: 50px solid #f21;
            background-color: #fff;
        }

说明(二):

从上面的例子可以看出,border-radius 圆弧的边界是 border 的外层,因此 border 的厚度越大,最后的圆会越来越不圆,当 border 的厚度大于等于 border-radius 时,border-radius 的圆心 在 比border 中,这时候就不能改变块级元素的形状了。

另外 border 厚度越来越大的话会把块级元素“挤”到其父级元素外面去,因为父级元素下面的子元素的位置与margin有关,而 border 外才是margin

时间: 2024-10-10 17:03:36

CSS画基本图形——圆的相关文章

CSS3边框属性_圆角、CSS画基本图形(圆形、三角形、多边形、爱心、八卦等)

有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,用的是firefox或者chrome,当然IE也能看一部分 1.正方形 div{ background:#F00; width:100px; height:100px; } 2.长方形 div{ background:#F00; width:200px; height:100px; } 3.圆形 div{ width: 100px; height: 100px; background: red; -moz-border-radius: 5

css画常用图形

1.圆形 在设置CSS时要设置宽度和高度相等,然后设置border-radius属性为宽度或高度的一半即可 .circle {     width: 120px;     height: 120px;     background: #7fee1d;     -moz-border-radius: 60px;     -webkit-border-radius: 60px;     border-radius: 60px; } 2.椭圆形 设置椭圆形的CSS时,高度要设置为宽度的一半,borde

css绘制特殊图形,meida查询,display inline-box间隙问题以及calc()函数

本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录的问题吧.一,css画特殊图形. 在网页中,需要一些特殊图形时.比如半圆形,三角形等,我们一般是让ui切图,但是实际上,利用css的边框 (border)属性,我们可以绘制一些有规律的图形. 盒模型中元素有四个角,那么每个角就存在一个弧度的属性. 先看代码: 1 .half_circle{ 2 wi

利用css样式画各种图形--初步、进阶、高级(一)

转文请注明:穆乙 http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html 利用css画图形,是个有利有弊的写法,好处是不用画图,且节省了一些流量,坏处是要写长串的css样式,而且有可能流量并没有减少,用与否视情况而定,个人选择. 下面是我做测试的一些图形,也是参考了一些网站,简单的注解一下和归纳了一下,其中并没涉及到复杂的css画图形. 其中用了css3.0的一些属性,所以这里声明:请用支持css3.0的浏览器看此文章! 正方

CSS之纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形 最终效果: CSS代码如下: 复制代码 代码如下: #square { width: 100px; height: 100px; background: red; }

纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形 最终效果: CSS代码如下: 1 #square {

用css画图标

css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一些简单的图标. 这些图标很多是通过三角形来拼贴起来的,所以我们需要知道怎么样画三角形. 1. 我们要将该 div 的 width 和 height 都设置为 0,三角形是通过 border 来实现: 2. 通过我们需要画成的三角形的目标分析,这个三角形的朝向(只针对规则的朝向:上.右.下.左.上左.

Android利用canvas画各种图形

canvas通俗的说就是一张画布,我们可以使用画笔paint,在其上面画任意的图形. 原理: 可以把canvas视为Surface的替身或者接口,图形便是绘制在Surface上的.Canvas封装了所有的绘制调用.通过Canvas, 绘制到Surface上的内容首先存储到一个内存区域(也就是对应的Bitmapz中),该Bitmap最终会呈现到窗口上. 使用: 1.Canvas可以直接new Canvas(): 2.在View中重写OnDraw()方法,里面有一个Canvas,今天讨论的内容. 方

如何用css画出三角形

看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. 这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了. 1 border:100px solid transparent //边框100px,实线,透明颜色,下面三行