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

css3深入理解之border-radius

2017-04-11 17:41 746 查看

ps：本文不会讲述border-radius的基础知识，请先看完基础部分再来阅读本文。

border-radius具有两个特性：大值特性和等比例特性。这两个特性主要用来控制当border-radius的值大于元素的宽度或高度时，元素边框的变形行为。

大值特性

当border-radius值很大的时候只会用元素的最大的宽或高来渲染

<style>
div
{
border:2px solid #a1a1a1;
height:200px;
background:#dddddd;
width:200px;
overflow:hidden;
border-radius:200px/200px;
}
</style>
</head>
<body>
<div></div>
</body>

改变radius的值：

<style>
div
{
border:2px solid #a1a1a1;
height:200px;
background:#dddddd;
width:200px;
overflow:hidden;
border-radius:300px/300px;
}
</style>

可以看出两段代码的效果都是一样，因为300px已经超过了元素的最大宽度和高度，所以自动变成了200px。

等比例特性

border-radius定义的某个角的垂直半径和水平半径的比例是不会变的。

其实上面的例子里也用到了这个特性，只是为了将理解力定位在最大值特性，避免等比例特性的干扰，我把长宽设置成一样，所以体现不出等比例特性，现在我们更改长宽比：

<style>
div
{
border:2px solid #a1a1a1;
height:200px;
background:#dddddd;
width:200px;
overflow:hidden;
border-radius:200px/400px;
}
</style>

根据最大值特性，垂直半径400px已经超出了元素的最大高度，所以应该会变为元素的最大高度200px，此时由于等比例特性200/400=1/2，所以水平半径=200px*1/2=100px，所以border-radius:200px/400px其实对应于border-radius:100px /200px。

<style>
div
{
border:2px solid #a1a1a1;
height:200px;
background:#dddddd;
width:200px;
overflow:hidden;
border-radius:100px/200px;
}
</style>

从结果上也可以看出border-radius:200px/400px和border-radius:100px /200px的效果是一样的。

当border-radius指定的某个角的水平半径和垂直半径都超过元素尺寸的时候，同意遵循这个两个特性。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： border-radius

相关文章推荐

新的分享

章节导航