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

转载于:https://www.cnblogs.com/bestend/p/4459637.html

CSS画基本图形——圆相关推荐

用CSS画三角形、圆、圆角
用CSS画常见几何图形利用css盒子边框特性画几何图形. <!DOCTYPE html> <html lang="en"> <head>< ...
CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
纯CSS画基本图形（矩形、圆形、三角形、多边形、爱心）
1.正方形 #square {width: 100px;height: 100px;background: red;} 2.长方形 #rectangle {width: 200px;height: 1 ...
用html css实现五角星,用CSS画五角星
五角星 #star-five { margin: 50px; position: relative; display: block; color: red; width: 0; height: 0; ...
java写三角形圆矩形_纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）...
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
【css】用css画圆，半圆和三角形
用css画圆,半圆和三角形圆,半圆三角形圆,半圆 // 圆宽高相等, border-radius大于宽度的一半 .circle{width: 100px;height: 100px;backg ...
纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）,里面很多涉及到CSS3的一些属性。
今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形. 椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八 ...
CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

CSS画基本图形——圆

CSS画基本图形——圆相关推荐

最新文章

热门文章