您的位置：首页 > Web前端 > CSS

css3中的border-radius

2016-07-10 17:45 405 查看

重识css3中的border-radius

　　大家可能都知道css3中的border-radius是用来定义圆角的，以前使用border-radius时，我都只是使用了border-radius带一个参数的用法，但最近发现原来border-radius还可以根据所带参数不同可以实现不同规则圆角的效果，下面就来讲讲border-radius所带的几种参数的含义吧。

一、border-radius带一个参数

　　border-radius带1个参数时，比较容易理解，即这个参数适用于四个角。（这个还是很容易理解的，在这里我就不啰嗦啦）

二、border-radius带两个参数

　　带两个参数时，第一个参数表示表示上左和下右、第二个参数表示上右和下左。（嘿嘿，我是这样记的——交叉相同）你可以试试下面的代码来验证呦。

　　

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;
height:200px;
border-radius: 200px/100px;
background:#FB9E84;
}
</style>
</head>
<body>
<div></div>
</body>
</html>


View Code
运行这个例子可以看到

　　


七、4个圆角分别定制特殊的形状

　　我们知道可以使用斜杠来定制特殊的圆角，但在为4个圆角分别定制不同的特殊形状时要注意使用的形式是border-radius:20px 30px 40px 50px/50px 40px 30px 20px;这种形式，而不是border-radius:20px/50px 30px/40px 40px/30px 50px/20px;(这种形式是不正确的),使用时一定要注意！

最后，使用斜杠定制特殊圆角的解析顺序跟上面讲的解析顺序相同，大家按照上面的推算就可以了。

（PS: IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性,IE8及更低版本不支持哟！）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航