css3之圆角样式Border-radius实例教程

在这里给大家做个css3圆角实例。

先看代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-Language" content="utf-8" /> 
<meta name="robots" content="all" /> 
<meta name="author" content="Tencent-ISRD" /> 
<meta name="Copyright" content="Tencent" /> 
<title>Border-radius</title> 
<style type="text/css"> 
.test{
width:400px;  
height:25px;  
margin:0 auto;
border:#dfdfdf 1px solid;
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
-webkit-border-radius: 15px;
-webkit-border-radius:3px;
border-radius: 3px;
padding:5px;    
text-decoration:inherit;
color:#000000;+color:#000000;
}
</style> 
</head> 
<body> 
<div class="test">在Firefox和Safari 3的浏览器里能看到圆角效果</div> 
</body> 
</html> 

Border-radius基本用法:

  • 水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。

  • 如果只提供一个,将用于全部的于四个角。

  • 如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。

  • 如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。

  • 垂直半径也遵循以上4点。

扩展例子1:水平与垂直半径相同时

.test .one{border-radius:10px;}
.test .two{border-radius:10px 20px;}
.test .three{border-radius:10px 20px 30px;}
.test .four{border-radius:10px 20px 30px 40px;}

扩展例子2:水平与垂直半径不同时

.test2 .one{border-radius:10px/5px;}
.test2 .two{border-radius:10px 20px/5px 10px;}
.test2 .three{border-radius:10px 20px 30px/5px 10px 15px;}
.test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}

测试浏览器:IE9 Firefox Chrome Safari Opera

金牌狙击手

52html5是一个web前端|html5资源平台,为广大html5开发者及爱好者提供html5相关的教程、资讯、html5游戏、html5教程等,并涉及css3、javascript前端知识。