CSS3 圆角(border-radius)
值:半径的长度
前缀
- -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 */ }
效果:
例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; }
效果:
书写顺序
/* 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教程应用css3 圆角border-radius属性制作...
让IE实现CSS3中的border-radius(圆角)
引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果
border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着,除去Internet Explorer 8及更低版本,所有的浏览器可以显示圆角。为了使样式能正确应用,需要为Webkit和Mozilla内核添加前缀。 CSS ...
让IE6也识别CSS3-圆角效果应用border-radius
NULL 博文链接:https://jm1999.iteye.com/blog/2218022
前面系统总结了CSS3中Gradient和RGBA的用法,今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中,大家都碰到过圆角的制作。当时,对于圆角的制作,我们都需要使用多张圆角图片做为背景,...
实现边框圆角 -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属性是一个众所周知的问题,而FF、Chrome原生的浏览器支持是的优雅的圆角感觉较好,如何解决这个问题呢? 一种比较传统的方案是放弃CSS3,使用背景图,但是这种...
-moz-border-radius:moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。 在这两个属性有值的时候,去掉哪个属性,对用他们做内核的浏览器就有影响,如果没值的话,就没影响,这两个属性和,IE,和...
主要介绍了CSS3使用border-radius属性制作圆角,并附上示例代码,推荐给有相同需求的小伙伴。
border-radius失效
有什么用?... border-radius: 50%; } 上述50%就是说设置各边圆角都为50%。 那么如何画个半圆? 如下,把宽度设置为高度的两倍。 #demo2 { width:100px; height:50px; background:green; bo
可以实现IE9以下版本CSS圆角效果与图片显示投影等功能。
CSS3 border-radius 属性:向 div 元素添加圆角边框: 一:首先建立一个div 二:给div设置圆角边框的弧度 三:给div设置弧度为50%的时候 正方形就会变为圆形 四:如果给长方形设置50%的弧度 就会得到椭圆形 5:...