CSS3设置DIV圆角

        从CSS3开始,增加了一个border-radius圆角的样式效果,大大增加了圆角控前端的开发便利,IE9以上及其它主流浏览器器均支持。

1、CSS3中的圆角标记:

border-radius

2、语法结构:

div{border-radius:3px 0;}

3、设置DIV对象四个角均为3像素圆角:

div{border-radius:3px;}

4、设置DIV对象右上角及左下角均为3像素,其它两个角为0不设置为圆角:

div{border-radius:0 0 3px 3px;}

5、完整HTML案例    本文来自于广州地理信息网:http://www.gzgis.com

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>对象圆角 在线演示 DIVCSS5 VIP</title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
<!-- www.divcss5.com --> 
</head> 
<body> 
<div>盒子左上角和右上角对象圆角测试</div> 
<div class="box">DIV盒子圆角</div> 
<div>盒子对象个角圆角测试</div> 
<div class="box3">DIV盒子圆角</div> 
<p>&nbsp;</p> 
<div>图片对象圆角测试</div> 
<div class="box2"><img src="images/divcss5-logo.gif" /></div> 
</body> 
</html>

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

粤ICP备19141338号,Copyright Your gzgis.com Rights Reserved.