本文主要介绍了一个例子来解释在CSS3的border-radius属性，这是在CSS3入门学习的基本知识，你需要的朋友可以参考一下。





边界半径

边界半径是一种缩写方法。如果所有前面和后面的值都存在，那么，前面的值设置它的水平半径，，后面的值设置它的垂直半径。如果没有，水平半径和垂直半径相等。

CSS代码将内容复制到剪贴板。


边界半径：2em 1em 4em / 0.5em 3em；




它相当于：

CSS代码将内容复制到剪贴板。


边框左上2em 0.5em半径；
边境上放半径：1em 3em；
边框底部放半径：4em 0.5em；
左下：1em 3em边界半径；




如何使用边框半径属性

下面是边界半径属性的最基本用法。

CSS代码将内容复制到剪贴板。


{。轮
边界半径：5px； / *使用圆角半径5px各个角度，这个属性是CSS3标准属性* /
-moz边界半径：5px；私有财产 / * Mozilla浏览器
WebKit的边界半径：5px；私有财产 / * WebKit浏览器

边界半径：5px 4px 3px 2px； / *四半径分别为左上、右上角和右下角和左下角。
}




1。画一个有边界半径的圆
盘


作为一个图片，它是用边界半径属性绘制的一个完整的实心圆。绘制实心圆的方法等于高度和宽度，边框的宽度设置为高度和宽度的一半。

CSS代码将内容复制到剪贴板。


{ #圈
宽度：200px；
身高：200px；
背景颜色：# a72525；
WebKit的边界半径：100px；
}




空心圆


通过边框半径属性和实心圆形镂空绘画几乎，只不过边框的宽度和宽度不到一半。

CSS代码将内容复制到剪贴板。


{ #圈
宽度：200px；
身高：200px；
背景颜色：# efefef可设置透明； / * * /
边境：3px # a72525固体；
WebKit的边界半径：100px；
}




破圈


CSS代码将内容复制到剪贴板。


{ #圈
宽度：200px；
身高：200px；
背景颜色：# efefef可设置透明； / * * /
边境：3px # a72525破灭；
WebKit的边界半径：100px 100px 100px 100px；
}




2。半圆和1 4圆
半


在这种情况下，半圆法是将宽度设置为高度的一半，并且只设置左上角和左下角的半径。

CSS代码将内容复制到剪贴板。


{ # quartercircle
宽度：200px；
身高：200px；
背景颜色：# a72525；
WebKit的200px边界半径：000；
}




1 4圆


1 4圆的实现是设置高度和宽度相等，只设置一个圆角，半径等于高度或宽度。

CSS代码将内容复制到剪贴板。


{ # quartercircle
宽度：200px；
身高：200px；
背景颜色：# a72525；
WebKit的200px边界半径：000；
}




更多的游戏

在看到这么多实例之后，您可以自己创建更多的东西，例如：


虚线的半圆和1 4圆。


配合位置属性做月亮。


的位置，RGBa和z-index属性做这些的维恩图的颜色开始。