欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

CSS3 圆角(border-radius)上半部圆角 下半部圆角 有大用

shiping1 的头像

 

值:半径的长度

前缀

  • -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;
     
    -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×

来自 http://www.cnblogs.com/rainman/archive/2011/06/21/2085800.html

CSS3 border-top-left-radius 属性

实例

向 div 元素的左上角添加圆角边框:

div
{
border:2px solid;
border-top-left-radius:2em;
}

亲自试一试

浏览器支持

IEFirefoxChromeSafariOpera
     

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-top-left-radius 属性。

定义和用法

border-top-left-radius 属性定义左上角边框的形状。

提示:该属性允许您向元素添加圆角边框。

默认值:0
继承性:no
版本:CSS3
JavaScript 语法:object.style.borderTopLeftRadius="5px"

语法

border-bottom-right-radius: length|% [length|%];

注释:border-top-left-radius 属性的长度值和百分比值定义四分之一椭圆(定义外部边框边缘的边角形状)的半径(radii)。第一个值是水平半径,第二个值是垂直半径。如果省略第二个值,则复制第一个值。如果长度为零,则边角为方形,而不是圆形。水平半径的百分比值参考边框盒的宽度,而垂直半径的百分比值参考边框盒的高度。

描述测试
length定义左下角的形状。测试
%以百分比值定义左下角的形状。测试



CSS3圆角详解

作者: 阮一峰

CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角。

网页设计大师Nicholas Zakas最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习。以下就是我翻译的中文版。

=========================================

CSS3圆角详解

作者:Nicholas Zakas

译者:阮一峰

原文:http://msdn.microsoft.com/en-us/scriptjunkie/gg508841.aspx

发表日期:2010年12月8日


一、CSS3圆角的优点

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

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

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

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

二、border-radius属性

CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。

比如,下面是一个div方框:

现在设置它的圆角半径为15px:

  border-radius: 15px;

这条语句同时将每个圆角的"水平半径"(horizontal radius)和"垂直半径"(vertical radius)都设置为15px。

border-radius可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

  border-radius: 15px 5px;

  border-radius: 15px 5px 25px;

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

(左下角的半径为0,就变成直角了。)

border-radius还可以用斜杠设置第二组值。这时,第一组值表示水平半径,第二组值表示垂直半径。第二组值也可以同时设置1到4个值,应用规则与第一组值相同。

  border-radius: 15px 5px / 3px;

  border-radius: 15px 5px 25px / 3px 5px;

  border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;

三、单个圆角的设置

除了同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性:

  * border-top-left-radius
  * border-top-right-radius
  * border-bottom-right-radius
  * border-bottom-left-radius

这四个属性都可以同时设置1到2个值。如果设置1个值,表示水平半径与垂直半径相等。如果设置2个值,第一个值表示水平半径,第二个值表示垂直半径。

  border-top-left-radius: 15px;

  border-top-left-radius: 15px 5px;

四、浏览器支持

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必须放在最后声明,否则可能会失效。)

另外,早期版本Firefox的单个圆角的语句,与标准语法略有不同。

  * -moz-border-radius-topleft(标准语法:border-top-left-radius)
  * -moz-border-radius-topright(标准语法:border-top-right-radius)
  * -moz-border-radius-bottomleft(标准语法:border-bottom-left-radius)
  * -moz-border-radius-bottomright(标准语法:border-bottom-right-radius)

五、注意事项

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

  border-color: black;
  border-style: solid dashed;
  border-width: 1px 2px 3px;
  border-top-color: red;
  border-radius: 5%;

另外,并非所有浏览器,都支持将圆角半径设为一个百分比值。

因此,目前最安全的做法,就是将每个圆角边框的风格和宽度,都设为一样的值,并且避免使用百分比值。

(完)

留言(24条)

写得这么详细,慢慢看

我也慢慢看,记得之前你也写过圆角的文章,我还Mark了书签。

看完了,对你的无私表示感谢,同时表达个人已经看得很明白,果然是大道至简。

有没有YUI自动化测试的文章可以分享?

文章比较浅,不过Nicholas Zakas本来就不是“网页设计大师”。
他是JavaScript大师。呵呵

呀!那些圆角矩形,竟然都是图片....

很踏实的文章,谢谢分享!

搜狗的webkit内核竟然不支持-webkit-border-radius 我实在是感到匪夷所思..

引用吴叔的发言:

搜狗的webkit内核竟然不支持-webkit-border-radius 我实在是感到匪夷所思..

我用的是搜狗2.2.0.1699去原文章提供的测试页面测试了下,没有问题。看了user-agent是AppleWebKit/534.3,是较新的版本了

确实是非常好的文章,也很详细,,也表示个人看了很有想法,呵呵

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
#############################
以上属性在IE9以下的浏览器能不能实现 全部圆角??求解决方案?

引用axiebin的发言:

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
#############################
以上属性在IE9以下的浏览器能不能实现 全部圆角??求解决方案?

ie9以下只能使用暴力方法:
http://bbs.blueidea.com/viewthread.php?tid=2880214&page=1&authorid=434259

很不错,学习了。我一直都在寻找这种简单方便的方法。看了你的文章才知道原来还有这个属性。我不是专业做设计的,只是感兴趣而已。比较喜欢web前端与后端。

学习了,以前详细的学习过,看过又有的新的收获,非常感谢!

现在有新方法了 css3pie 可以兼容ie6-ie8的圆角。PIE给我们带来了CSS3属性在IE中的支持。

对圆角有了更全面的了解,非常感谢。

我试过怎么IE8版本以下的都不兼容这个属性,这个问题有没有解决的办法呢

这个在ie8以下的版本不适合
有没有在IE8下适合的???

引用丁玲的发言:

这个在ie8以下的版本不适合
有没有在IE8下适合的???

你需要这个
http://css3pie.com/
---------分割线----------------

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);
/*css中引入pie文件*/

你能说一下,怎么样才能用PS,或者是其它工具量出圆角的所要用的到数据吗?比如椭圆时候,半径数据,怎么能够测量出来?如果可以的话,能把方法发一份邮件给我吗?

不错的教程,学习了

希望能研发出ie6-8支持圆角方法。

14年报到

感谢分享,我试了试,确实不错。用了下,但是IE6、IE7、IE8都不怎么支持,然后我百度了一下,搞了个behavior: url(ie-css3.htc);

然后发现在IE6下面看,整个是黑的,可以看我个人网址那个商标抓让流程的实例


来自 http://www.ruanyifeng.com/blog/2010/12/detailed_explanation_of_css3_rounded_corners.html



CSS3的圆角Border-radius

极客网

前面系统总结了CSS3GradientRGBA的用法,今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中,大家都碰到过圆角的制作。当时,对于圆角的制作,我们都需要使用多张圆角图片做为背景,分别应用到每个角上,我应用最多的就是在需要圆角的元素标签中加四个空标签,然后在每个空标签中应用一个圆角的背景位置,然后在对这几个应用了圆角的标签进行定位到相应的位置,具体实现过程我就不在多讲,只看方法就知道烦死人。

如今CSS3中的border-radius出现后,让我们没有那么多的烦恼了,首先制作圆角图片的时间是省了,而且其还有多个优点:其一减少网站的维护的工作量,少了对图片的更新制作,代码的替换等等;其二、提高网站的性能,少了对图片进行http的请求,网页的载入速度将变快;其三增加视觉美观性。既然border-radius有这么多好处,我们就从他的语法,属性和属性值等方面来看其如何应用,又是如何制作圆角,还有就是除了制作圆角他还能制作什么?有这么多,那我们就开始吧:

一、语法:

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

 

二、取值:

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

三、说明:

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

1、border-radius: [ <length>{1,4} ]; //这里只有一个值,那么top-left、top-right、bottom-right、bottom-left四个值相等

2、border-radius:[ <length>{1,4} ]  [ <length>{1,4} ] ; //这里设置两个值,那么top-left等于bottom-right,并且取第一个值;top-right等于bottom-left,并且取第二个值

3、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]   [ <length>{1,4} ];//如果有三个值,其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right

4、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]  [ <length>{1,4} ]   [ <length>{1,4} ];//如果有四个值,其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left

前面,我们主要看了border-radius的缩写格式,其实border-radius和border属性一样,还可以把各个角单独拆分出来,也就是以下四种写法,这里我规纳一点,他们都是先Y轴在X轴,具体看下面:

border-top-left-radius: <length>  <length>   //左上角
border-top-right-radius: <length>  <length>  //右上角
border-bottom-right-radius:<length>  <length>  //右下角
border-bottom-left-radius:<length>  <length>   //左下角

 

这里说一下,各角拆分出来取值方式:<length> <length>中第一个值是圆角水平半径,第二个值是垂直半径,如果第二个值省略,那么其等于第一个值,这时这个角就是一个四分之一的圆角,如果任意一个值为0,那么这个角就不是圆角。

border-radius只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式,对于老版的浏览器,border-radius需要根据不同的浏览器内核添加不同的前缀,比说Mozilla内核需要加上“-moz”,而Webkit内核需要加上“-webkit”等,那么我为了能兼容各大内核的老版浏览器,我们看看border-radius在不同内核浏览器下的书写格式:

1、Mozilla(Firefox, Flock等浏览器)

  -moz-border-radius-topleft: //左上角
  -moz-border-radius-topright: //右上角
  -moz-border-radius-bottomright: //右下角
  -moz-border-radius-bottomleft: //左下角
   
   等价于:

  -moz-border-radius: //简写

 

2、WebKit (Safari, Chrome等浏览器)

  -webkit-border-top-left-radius:  //左上角
  -webkit-border-top-right-radius:  //右上角
  -webkit-border-bottom-right-radius:  //右下角
  -webkit-border-bottom-left-radius:  // 左下角

   等价于:

  -webkit-border-radius:  //简写

 

3、Opera浏览器:

  border-top-left-radius: //左上角
  border-top-right-radius: //右上角
  border-bottom-right-radius: //右下角
  border-bottom-left-radius: //左下角
  
  等价于:
 
  border-radius: //简写

 

4、Trident (IE)

IE<9不支持border-radius;IE9下没有私有格式,都是用border-radius,其写法和Opera是一样的,这里就不在重复。

为了不管是新版还是老版的各种内核浏览器都能支持border-radius属性,那么我们在具体应用中时需要把我们的border-radius格式改成:

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

 

其拆分开来的格式相应需要加上-moz和-webkit,上面的代码其实就等价于下面的代码:

  -moz-border-radius-topleft: <length> <length> //左上角
  -moz-border-radius-topright: <length> <length> //右上角
  -moz-border-radius-bottomright: <length> <length> //右下角
  -moz-border-radius-bottomleft: <length> <length> //左下角
  -webkit-border-top-left-radius:  <length> <length> //左上角
  -webkit-border-top-right-radius:  <length> <length> //右上角
  -webkit-border-bottom-right-radius: <length> <length> //右下角
  -webkit-border-bottom-left-radius:  <length> <length> // 左下角
  border-top-left-radius: <length> <length> //左上角
  border-top-right-radius: <length> <length> //右上角
  border-bottom-right-radius: <length> <length> //右下角
  border-bottom-left-radius: <length> <length> //左下角

 

另外需要特别注意的是,border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面,(特别声明:本文中所讲实例都只写了标准语法格式,如果你的版本不是上面所提到的几个版本,如要正常显示效果,请更新浏览器版本,或者在border-radius前面加上相应的内核前缀,在实际应用中最好加上各种版本内核浏览器前缀。)

我们初步来看一个实例:

HTML代码:

  <div class="demo"></div>

 

为了更好的看出效果,我们给这个demo添加一点样式:

.demo {
  width: 150px;
  height: 80px;
  border: 2px solid #f36;
  background: #ccc;
}

 

注:如无特殊声明,本文实例所有基本代码格式如上所示,只在该元素上添加border-radius属性设置。

.demo {
  border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
}

 

这种写法我们前面有提到过,“/”前是指圆角的水平半径,而“/”后是指圆角的垂直半径,他们两都遵循TRBL的顺序原则。为了能让大家更清楚理解,我们把上面代码换成如下:

.demo {
  border-top-left-radius: 10px 20px;
  border-top-right-radius: 15px 30px;
  border-bottom-right-radius: 20px 10px;
  border-bottom-left-radius: 30px 15px;
}

 

不仿看看他们的效果:

三、支持的浏览器:

上面我们介绍了border-radius的基本用法,以及在各大浏览器下的格式等,下面我们通过实例来介绍其具体的用法:

一:border-radius只有一个取值时,四个角具有相同的圆角设置,其效果是一致的:

.demo {
  border-radius: 10px;
}
其等价于:

.demo{
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
}

 

效果:

二:border-radius设置两个值,此时top-left等于bottom-right并且他们取第一个值;top-right等于bottom-left并且他们取第二个值,也就是说元素 左上角和右下角相同,右上角和左下角相同

.demo {
  border-radius: 10px 20px;
}
      
等价于:
       
.demo {
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

 

效果:

三:border-radius设置三个值,此时top-left取第一个值,top-right等于bottom-left并且他们取第二个值,bottom-right取第三个值

.demo {
  border-radius: 10px 20px 30px;
}
       
等价于
        
.demo {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 30px;
}

 

效果:

四:border-radius设置四个值,此时top-left取第一个值,top-right取第二个值,bottom-right取第三个值.bottom-left取第四个值

.demo {
  border-radius:10px 20px 30px 40px;
}
       
等价于
        
.demo {
 border-top-left-radius: 10px;
 border-top-right-radius: 20px;
 border-bottom-right-radius: 30px;
 border-bottom-left-radius: 40px;
}

 

效果:

从上面四个实例中我们可以看出border-radius和border取值非常相似,我们border遵循TRBL原则(从上边右边下边左边分别对应1、2,3,4四个值),只不过border-radius换成了左上角(top-left)对就值1,右上角(top-right)对应值2,右下角(bottom-right)对应值3,左下角(bottom-left)对应值4.

上面四个实例都是水平和垂直半径相等情况下border-radius的应用,下面我们来看几个水平和垂直半径值不一样的实例:

一、border-radius: 水平 / 垂直:只设置一个水平和一个垂直半径时,那么水平半径分别指定了元素个四个角的水平半径值,同样垂直半径指定了元素的垂直半径值,此时四个角具有相同的效果,因为他们具有相同的值

.demo {
  border-radius: 10px / 20px;
}
       
等价于:
        
.demo {
  border-top-left-radius: 10px 20px;
  border-top-right-radius: 10px 20px;
  border-bottom-right-radius: 10px 20px;
  border-bottom-left-radius: 10px 20px;
}

 

效果:

此时我们每个角不在是四分之一圆了,前面我们也说过,只有水平和垂直半径值相同时,他们才具有四分之一圆特性,这样一来,我们可以改变不同的半径值,制作一些特殊的图形效果,感兴趣的朋友可以自己在本地尝试一下各种不同的设置方式。

二、border-radius: 水平1 水平2 / 垂直1  垂直2:设置了两个水平值和两个垂直值,此时我们top-left和bottom-right具有相同的水平和垂直半径,也就是其中的水平1和垂直1;而top-right和bottom-left也具有相同的水平和垂直半径值,也就是水平2和垂直2,我们他拆分出来就是:

border-top-left-radius: 水平1  垂直1;
border-bottom-right-radius: 水平1  垂直1;
border-top-right-radius: 水平2  垂直2;
border-bottom-left-radius: 水平2  垂直2;

 

具体我们来看下面的实例:

.demo {
  border-radius: 10px 20px / 20px 10px;
}
        
等价于:
        
.demo {
  border-top-left-radius: 10px 20px;
  border-bottom-right-radius: 10px 20px;
  border-top-right-radius: 20px 10px;
  border-bottom-left-radius: 20px 10px;
}

 

效果:

上面两种都是相互对应的取值,我们来看一个实例,水平有三个取值,而 垂直只有两个取值

.demo {
  border-radius: 10px 20px 30px / 50px 60px;
}
        
等价于:
        
.demo {
  border-top-left-radius: 10px 50px;
  border-top-right-radius: 20px 60px;
  border-bottom-left-radius: 20px 60px;
  border-bottom-right-radius: 30px 50px;
}

 

效果:

我们从上面等价代码中可以知道,不管他们怎么取值,“/”前后各自按TRBL顺序取值。

上面几种都是我们常见的一些应用,那下面我们来看几种特殊点的应用:

一、对于border-radius还有一个内半径和外半径的区别,它主要是元素 边框值较大时,效果就很明显,当我们border-radius半径值小于或等于border的厚度时,我们边框内部就不具有圆角效果,例如下面的实例

.border-big {
   border: 15px solid green;
   border-radius: 15px;
}

 

效果:

我们接着上面这个例子,把 border-radius半径值改成比边框值大一点:

.border-small {
   border: 15px solid green;
   border-radius: 25px;
}

 

效果:

为何当border-radius的半径小于元素边框的厚度时,内部没有圆角效果?我在这里说一下,因为我们的border-radius的内径值是等于外径值减去边框厚度值,当他们的值为负时,内径默认为0,最前面讲border-radius取值时就说过其值不能为负值。同时也说明border-radius的内外曲线的圆心并不一定是一致的。只有当边框厚度为0时,我们内外曲线的圆心才会在同一位置。

二、如果角的两个相邻边有不同的宽度,那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。相邻转角是由大向小转。

.demo {
  border-width: 10px 5px 20px 3px;
  border-radius: 30px;
}

 

效果:

三、相邻两条边颜色和线条样式不同时,那么两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如,两条边宽度相同,这个点就是一个45°的角上,如果一条边是另外一条边的两倍,那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线。我们来看一个四边颜色不一样,宽度不一样的实例:

.demo {
  border-color: red green blue orange;
  border-width: 15px 30px 30px 80px;
  border-radius: 50px;
}

 

效果:

上面这几种是比较特殊点的用法,如果大家还想通过border-radius制作更多不同形状,或者更多的应用,可以点击这里

border-radius能应用在各种元素中,但在img和table应用时会有点差别的,首先先来看图片上应用border-radius时的情况。在img上应用border-radius到目前只有Firefox4.0+浏览器才正常,而在其他浏览器都不能对图片进行剪切,我们先来看一个实例:

img {
  border: 5px solid green;
  border-radius: 15px;
}

 

我们来看其在各浏览器下的效果:

左图是在Safari5.0、Google Chrome 10.0、Opera11.1下的效果,我们可以看得出,图片根本就没有圆角效果,右图是在Firefox4.0下的效果,低于这个版本的和左图一样效果,如果需要达成一致效果,大家就必须放弃border-radius而采用CSS2制作圆角的老办法。另外table的样式属性border-collapse是collapse时,border-radius不能正常显示,只有border-collapse: separate;时才能正常显示。

table {
  border-collapse: collapse;
  border: 2px solid red;
  background: green;
  border-radius: 15px;
}

 

效果:

关于表格的demo可以查看这里

那么到此,我们border-radius的一些用法就介绍完了。希望能给大家带来一点帮助,感兴趣的朋友可以观注本站后面的内容,我们下节将介绍CSS3中的文字阴影:text-shadow的用法。更希望感兴趣的朋友一起探讨和学习CSS3更多的技术知识。

下面列表本站关于CSS3的其他属性的用法:

第一节: 《CSS3 Gradient

上一节: 《CSS RGBA

下一节:《CSS3的文字阴影text-shadow

第五节:《CSS3 Box-shadow

第六节:《CSS3 Transform

第七节:《CSS3 Transition

第八节:《CSS3 Animation

如需转载请注明出处: W3CPLUS

来自 http://www.w3cplus.com/css3/border-radius

 

第一章、基本的圆角框

原创:冰极峰 转载请注明出处 2009年11月30日10:19:34


文章导航:

第一章:基本的圆角框

第二章:透明圆角化背景图片

第三章:圆角化图片

第四章:CSS圆角框组件 V1.0


 

序言:在我的文章《超圆滑圆角框的半完美解决方案》中已经总结了七种不同的圆角框解决方案,基本上总结完了目前网络上比较流行的圆角框实现方案。而在我的另一篇文章《无图片山顶角》中又是一个另类的实现方法。

CSS实现圆角框是一件大家都说烂了的事件,我也写过两篇总结文章,为什么还会有这篇文章呢,事情是这样的。在我们的以前的项目中,实现圆角框往往是用背景图片来实现的,但是,当这些项目发布上线后,在维护过程中,有时需要添加一些新的需求,因为以前的项目中大量采用了圆角图片,并且这些图片全部采用了CSS sprites方式合并的图,为了不增加更多的额外工作,并且也不想用JS来添加更多的http请求,所以需要一些简单的CSS方案来解决这个问题。而我的个人爱好,也喜欢采用无图片的方式来处理这些效果。总觉得CSS能完成的工作,为什么不让它来实现呢?

实现原理:

CSS方式实现圆角框的原理在网络上已经有很多人详细解说了,下面这个示意图是我将其中的一个圆角进行放大后的效果。

 

 

  

图一

从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的,每一个容器的宽度不同,这个宽度是由margin外边距来实现的,如:margin:0 5px;就是左右两侧的外边距5像素,从上到下有5条线,其外边距分别为5px3px2px1px,依次递减。因此根据这个原理我们可以实现简单的html结构和样式。

1Html结构层:

复制代码
代码
1<div class="sharp color1">
2       <class="b1"></b><class="b2"></b><class="b3"></b><class="b4"></b> 
3       <div class="content">文字内容</div>
4       </div>
5       <class="b5"></b><class="b6"></b><class="b7"></b><class="b8"></b>   
6</div>
复制代码

b1~b4构成上面的左右两个圆角结构体,而b5~b8则构建了下面左右两个圆角结构体。而content则是内容主体,将这些全部放在一个大的容器中,并给它的一个类名sharp,用来设置通用的样式。再给它叠加了一个color1类名,这个类名用来区别不同的颜色方案,因为可能会有不同颜色的圆角框。

2CSS样式:

复制代码
代码
1.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
2.b1,.b8{margin:0 5px;}
3.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
4.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
5.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;} 
复制代码

将每个b标签都设置为块状结构,并定义其高度为1像素,超出部分溢出隐藏。从上面样式中我们已经看到margin值的设置,是从大到小减少的。而b1b8的设置是一样,已经将它们合并在一起了,同样的原理,b2b7b3b6b4b5都是一样的设置。这是因为上面两个圆和下面的两个圆是一样,只是顺序是相对的,所以将它合并设置在一起。有利于减少CSS样式代码的字符大小。后面三句和第二句有点不同的地方是多设置了左右边框的样式,但是在这儿并没有设置边框的颜色,这是为什么呢,因为这个边框颜色是我们需要适时变化,所以将它们分离出来,在下面的代码中单独定义。

接下我们设置内容区的样式: 

代码
.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}

也是只设置左右边框线,但是不设置颜色值,它和上面八个b标签一起构成圆角框的外边框轮廓。

往往在一个页面中存在多个圆角框,而每个圆角框有可能其边框颜色各不相同,有没有可能针对不同的设计制作不同的换肤方案呢,答案是有的。在我的这个应用中,可以换不同的皮肤颜色,并且设置颜色方案也并不是一件很难的事情。下面看看我是如何将它们应用到不同的颜色的。

在上面的样式设计中,我已经给颜色方案留下了可以扩展的空间。我将所有的涉及到边框色的类名全部集中在一起,用群选择符给它们设置一个边框的颜色就可以了。如下所示:

代码
1.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#96C2F1;}
2.color1 .b1,.color1 .b8{background:#96C2F1;}

注意:需要将这两句的颜色值设置为一样的,第二句中虽说是设置的background背景色,但它同样是上下边框线的颜色,这一点一定要记住。因为b1b8并没有设置border,但它的高度值为1px,所以用它的背景色就达到了模拟上下边框的颜色了。

现在已经将一个圆角框描述出来了,但是有一个问题要注意,就是内容区的背景色,因为这儿是存载文字主体的地方。所以还需要加入下面这句话,也是群集选择符来设置圆角内的所有背景色。

代码
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:#EFF7FF;}

这儿除了b1b8外,其它的标签都包含进来了,并且包括content容器,将它们的背景色全部设置一个颜色,这样除了线框外的所有地方都成为一种颜色了。在这儿我也用到包含选择符,给它们都加了一个color1,这是颜色方案1的类名,依照这个原理可以设置不同的换肤方案。

好了,我们将上面的所有代码集中起来,就完成一个纯CSS圆角框的实例模型,在源码中,我设置了六套颜色方案,其它的颜色方案就看你的了。

下面是源码演示后的截图:

 

图二

     为了演示效果,本模型的宽度值全部采用百分比实现的,你可以随意伸缩宽度,看看它能否适应弹性的变化。

本模型在以下浏览器中完美通过:

IE5.5IE6IE7IE8FF3TTMaxthon2.1.5Opera9.6Safari4.0Chrome2.0

点击这儿下载完整的压缩包:Demo

来自 http://www.cnblogs.com/binyong/archive/2009/11/30/1613376.html

 

 



 
普通分类: