1、四个角的圆角半径都一样的情况:
-webkit-border-radius: 10px; /*webkit内核支持*/
-moz-border-radius: 10px;/*Gecko内核支持*/
border-radius: 10px; /*CSS3支持*/
2、四个角的圆角半径都不一样的情况:
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 40px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 40px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 20px;
引用
分享到:
相关推荐
css3教程应用css3 圆角border-radius属性制作...
让IE实现CSS3中的border-radius(圆角)
让IE6也识别CSS3-圆角效果应用border-radius
引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果
border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着,除去Internet Explorer 8及更低版本,所有的浏览器可以显示圆角。为了使样式能正确应用,需要为Webkit和Mozilla内核添加前缀。 CSS ...
NULL 博文链接:https://jm1999.iteye.com/blog/2218022
前面系统总结了CSS3中Gradient和RGBA的用法,今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中,大家都碰到过圆角的制作。当时,对于圆角的制作,我们都需要使用多张圆角图片做为背景,...
css3实现圆角矩形 使用border-radius实现圆角,兼容到IE6
实现边框圆角 -moz-border-radius: 32px; -webkit-border-radius: 32px; border-radius: 32px; behavior: url(border-radius.htc); 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//...
IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性,如何解决这个问题呢?百度了一下,发现有个开源的插件可以解决此问题
主要介绍了CSS3使用border-radius属性制作圆角,并附上示例代码,推荐给有相同需求的小伙伴。
-moz-border-radius:moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。 在这两个属性有值的时候,去掉哪个属性,对用他们做内核的浏览器就有影响,如果没值的话,就没影响,这两个属性和,IE,和...
css3中的边框一般多为矩形,也可以通过设置实现圆角边框的效果,通过border-radius:;通过设置该属性值得大小改变边框的圆角大小,从而达到自己需要的圆角边框效果
CSS3圆角详解 一、CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些...CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这.....
让ie6 /7支持css3 如border-radius等特性的插件
前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持,但是由于某些原因IE并不支持...