CSS3圆角（border-radius）的用法

来源：互联网发布：松下gr7软件下载编辑：程序博客网时间：2024/05/17 08:54

前缀

-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 */}

效果：
CSS圆角

例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;}

效果：
CSS圆角

书写顺序

/* 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×

下面的例子中，我们将讨论CSS3的一些新功能和新特性，并教你在不使用图片和JavaScript的情况下，如何制作酷炫的圆形导航菜单。该实例将用到CSS3的新特性： border-radius和animation。

<html ><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><title>酷炫菜单</title><style>.css3Menus{background: #14080a;width: 506px;height: 260px;padding: 20px;}ul{list-style: none;}li{float: left;font: 14px;color: #FFF;background-color: #cccc00;width: 80px;height: 80px;padding: 20px;margin: 0 30px 0 0;-moz-border-radius: 60px;-moz-border-radius: 60px;border-radius: 60px;}li a{color: #fff;text-decoration: none;display: block;width: 80px;height: 45px;text-align: center;padding: 35px 0 0 0;margin: 0 40px 0 0;border-radius: 40px;}li#Menu1 {background-color: #00ffcc;}li#Menu2 {background-color: #cc9900;margin-top: 100px;}li#Menu3 {background-color: #33ff66;margin-top: 50px;}li#Menu1 a{background-color: #ff0000;}li#Menu2 a{background-color: #660033;}li#Menu3 a{background-color: #66cccc;}li a:hover,li a:focus,li a:active{width: 120px;height: 65px;padding: 55px 0 0 0;margin: -20px 0 0 -20px;border-radius: 60px;-moz-animation-name:bounce;-moz-animation-duration:1s;-moz-animation-iteration-count:4;-moz-animation-direction:alternate;}@-moz-keyframes bounce{from {margin: -2 40px 0 -2 ;}to {margin: 120px 40px 0 0 ;}}</style></head><body>  <div class="css3Menus"> 测试信息 <ul> <li id = "Menu1"><a href="#">Menu1</a></li> <li id = "Menu2"><a href="#">Menu2</a></li> <li id = "Menu3"><a href="#">Menu3</a></li> </ul> </div></body></html>

效果很酷吧，原文地址：http://www.csdn.net/article/2013-07-18/2816264-create-a-cool-animated-css3-menu-without-using-images-and-javascript