CSS3圆角介绍

CSS3圆角的优点

传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:

  * 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再需要了。

  * 提高网页性能。由于不必再发出多余的HTTP请求,网页的载入速度将变快。

  * 增加视觉可靠性。某些情况下(网络拥堵、服务器出错、网速过慢等等),背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况。

CSS3 border-radius 属性

基本语法:

  border-radius : none | <length>{1,4} [/ <length>{1,4} ]?

取值范围:

  <length>: 由浮点数字和单位标识符组成的长度值。不可为负值。

简单说明:

  border-radius 是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现:

  1、只有一个值,那么 top-left、top-right、bottom-right、bottom-left 四个值相等。

  2、有两个值,那么 top-left 等于 bottom-right,并且取第一个值;top-right 等于 bottom-left,并且取第二个值

  3、有三个值,其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。

  4、有四个值,其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。

只有一个值:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
    div
    {
     width: 150px;
     height: 80px;
     border: 2px solid #f36;
        border-radius: 20px;
     background: #ccc;
    }
</style>
</head>
    <body>
    <div> </div>
    </body>    
</html>

有两个值:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
    div
    {
     width: 150px;
     height: 80px;
     border: 2px solid #f36;
        border-radius: 30px 20px;
     background: #ccc;
    }
</style>
</head>
    <body>
    <div> </div>
    </body>    
</html>

有三个值:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
    div
    {
     width: 150px;
     height: 80px;
     border: 2px solid #f36;
     border-radius: 30px 20px 0;
     background: #ccc;
    }
</style>
</head>
    <body>
    <div> </div>
    </body>    
</html>

有4个值:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
    div
    {
     width: 150px;
     height: 80px;
     border: 2px solid #f36;
     border-radius: 30px 20px 0 40px;
     background: #ccc;
    }
</style>
</head>
    <body>
    <div> </div>
    </body>    
</html>

浏览器支持

IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4,都支持上述的border-radius属性。早期版本的Safari和Chrome,支持-webkit-border-radius属性,早期版本的Firefox支持-moz-border-radius属性。

目前来看,为了保证兼容性,只需同时设置-moz-border-radius和border-radius即可。

  -moz-border-radius: 15px;
  border-radius: 15px;

(注意:border-radius必须放在最后声明,否则可能会失效。)

虽然各大浏览器都支持border-radius,但是在某些细节上,实现都不一样。当四个角的颜色、宽度、风格(实线框、虚线框等)、单位都相同时,所有浏览器的渲染结果基本一致;一旦四个角的设置不相同,就会出现很大的差异。

并非所有浏览器,都支持将圆角半径设为一个百分比值。目前最安全的做法,就是将每个圆角边框的风格和宽度,都设为一样的值,并且避免使用百分比值。



继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> div { width: 200px; height: 100px; border: 2px solid #f36; border-color: red green blue orange; border-width: 15px 30px 30px 80px; border-radius: 50px; background: #ccc; } </style> </head> <body> <div> </div> </body> </html>
提交重置代码
高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

据说名字长的人会有很多女朋友

这个可以啊,66的

7年前    添加回复 0

我喜欢晴天

现在是不是都在用来css3了啊

7年前    添加回复 0

小水滴

一直以为所有浏览器都一样

7年前    添加回复 0

大神,求带!

看这效果可以自己做一个体育场看台的样式

7年前    添加回复 0

小天

css3中的圆角,是不错的一个效果,表单的文本框,也是可以使用的,这样就可以做出一些美观的效果!!!

7年前    添加回复 0

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~