css3中Border-radius实例讲解与学习

css3中Border-radius实例讲解与学习

时间：2011-02-20　来源：前端设计　作者：webskys　我要评论
css3来了，这里有一项新的技术，圆角的效果让我们从此不再忧愁（别急!css3还未正式发布），现在就让我们先睹为快，了解下css3中这一强大的技术：border-radius吧

从我开始学做网页的时候起，页面上用到的圆角都是头痛的事情，最初是用表格，三行三死，然后把圆角图片切成9块分别填充，呵呵，现在想起来无语。

后面网上又找了css圆角代码，1像素1像素的把圆角拼出来，这时候，我开始懒了，用了几次，当时就无语了。

如今，我更懒了，遇见圆角效果，就做成图片用CSS设置成背景，方便快捷。

css3来了，这里有一项新的技术，圆角的效果让我们从此不再忧愁（别急!css3还未正式发布），现在就让我们先睹为快，了解下css3中这一强大的技术：border-radius吧。

css3中圆角语法为 border-radius，其相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius,虽然现在还没完全正式定案，但是已经有许多浏览器支持了这个标签。 Mozilla类最典型的代表：FireFox的 -moz-border-radius 以及WebKit类的Safari和Google Chrome -webkit-border-radius。

下面我们来看看border-radius在每个浏览器不同的语法：

CSS3	Mozilla	WebKit	备注
border-radius	-moz-border-radius	-webkit-border-radius	整体圆角
border-topright-radius	-moz-border-topright-radius	-webkit-border-topright-radius	右上圆角
border-topleft-radius	-moz-border-topleft-radius	-webkit-border-topleft-radius	左上圆角
border-bottomright-radius	-moz-border-bottomright-radius	-webkit-border-bottomright-radius	右下圆角
border-bottomleft-radius	-moz-border-bottomleft-radius	-webkit-border-bottomleft-radius	左下圆角

-moz-border-radius使用方法：

以下是如何在网页中使用border-radius 。以-moz-border-radius为例，如果是Safari，请装-moz-改为-webkit-即可。

语法： -moz-border-radius:10px;设定四边的圆角为10px。



语法： -moz-border-radius-topright:10px;-moz-border-radius-topleft:10px;指定右上跟左上为10px。



语法： -moz-border-radius:10px 0; border-radius同样支持语法缩写(左上10px/右上0/右下10px/左下0)。



语法： -moz-border-radius:10px 40px; border-radius同样支持语法缩写(左上10px/右上40px/右下10px/左下40px)。



WebKit的特殊效果

-webkit-border-radius 针对圆角，还有做出阴影、旋转等特殊的效果。 好消息是FireFox 3.5也支持该功能，只要将 -webkit 改为 -moz- 就可以直接使用。

语法： -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.6); 头两个值(1px)设定位移点数，第三值(5px)则是柔边。 rgba依序填写RGB三原色的数值。 a是透明值(alpha)，0.6表示60%透明。 如果不会使用rgba，可以直接改用色码(#ffffff)。



语法： -moz-transform: rotate(-5deg); 设定圆角的旋转角度，正值是顺时针，负值是逆时针。 deg是角度的意思。

FireFox3.5 新技术

FireFox3.5版针对圆角，多了一个新的功能。 这个新功能我还不太清楚要怎么定义他，你可以想成是它可以针对一个边角再产生二种圆角效果，详细请看范例。

语法： -moz-border-radius: 40px / 10px; 使用 / ，可以让该圆角先有40px的边距，再有10px的边距。



语法： -moz-border-radius-topleft: 40px 10px; -moz-border-radius-bottomright: 40px 10px; 可以设定指定的一个边角，有两种圆角效果。



语法： -moz-border-radius: 40px 10px 10px 40px / 11px 21px 11px 21px; 我们可以再针对四个不同的边角去设定。



原文地址：http://www.webskys.com/css3/24.h
----------------------------------------------我是分界线-------------------------------------------------

转：详解CSS3:border-radius
说明：本文所介绍css3效果不同浏览器可能显示结果不一样Firefox浏览器测试正常。

详解CSS3，本文详解border-radius，它实现的效果很多，比如：圆角矩形，圆，椭圆等等。

CSS3 border-radius是什么？

border-radius的含义是：圆角。

CSS3 border-radius的书写格式：

border-radius:apx，比较常见，其中a表示数值，下同；

-webkit-border-top-left-radius:apx，类似这种的写法还是很实用的，但一定要记住顺序，一句话：先写Y轴，再写X轴。

注意：上诉的-webkit-是兼容webkit内核的写法，-moz-内核的写法有所不同，如：-moz-border-radius-topleft:apx

下面我们通过几个实例演示说明border-radius的用法：

CSS3 border-radius 圆角矩形：

.demo01{

-webkit-border-radius:10px;

-moz-border-radius:10px;

}

CSS3 border-radius 圆角矩形2：

.demo02{

-webkit-border-radius:36px;

-moz-border-radius:36px;

}

CSS3 border-radius 圆：

.demo03{

height:300px;

line-height:300px;

-webkit-border-radius:300px;

-moz-border-radius:300px;

}

CSS3 border-radius 漂亮圆角：

.demo04{

-webkit-border-top-left-radius:20px;

-webkit-border-bottom-right-radius:20px;

-moz-border-radius-topleft:20px;

-moz-border-radius-bottomright:20px;

}

CSS3 border-radius 椭圆：

.demo05{

height:300px;

-webkit-border-radius:180px;

-webkit-transform:rotatex(60deg);

}

能做的事情很多，更多技巧靠各位读者自己发现！

---------------------------------我是分界线-------------------------

转：CSS3 圆角（border-radius）


前缀
例1
例2：无边框
书写顺序
其它
支持性

值：半径的长度

前缀

-moz(例如 -moz-border-radius)用于Firefox
-webkit(例如：-webkit-border-radius)用于Safari和Chrome。

例1

<div id="round"></div>
#round {
padding:10px; width:300px; height:50px;
border: 5px solid #dedede;
-moz-border-radius: 15px;      /* Gecko browsers */
-webkit-border-radius: 15px;   /* Webkit browsers */
border-radius:15px;            /* W3C syntax */
}

效果：

例2：无边框

<div id="round"></div>
#round {
padding:10px; width:300px; height:50px;
background:#FC9;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius:15px;
}

效果：

书写顺序

/* Gecko browsers */
-moz-border-radius: 5px;
/* Webkit browsers */
-webkit-border-radius: 5px;
/* W3C syntax - likely to be standard so use for future proofing */
border-radius:10px;

其它

支持上、右、下、左

border-radius:5px 15px 20px 25px;

支持拆分书写

/* Gecko browsers */
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 20px;

/* Webkit browsers */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 20px;

/* W3C syntax */
border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius:  20px;

支持性

浏览器	支持性
Firefox(2、3+)	√
Google Chrome(1.0.154+…)	√
Google Chrome(2.0.156+…)	√
Safari(3.2.1+ windows)	√
Internet Explorer(IE7, IE8)	×
Opera 9.6	×