CSS属性border-radius允许你设置元素的外边框圆角。
该属性是一个简写属性，是为了将这四个属性border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius简写为一个属性。
我们先看其中一个属性border-top-right-radius，其他属性同理。
border-top-right-radius用于设置右上外边框圆角。
一个圆角由两个半径确定：水平半径和垂直半径。
当水平半径和垂直半径相等时，可以简写为一个值，格式：border-top-right-radius: <length-percentage>;，此时相等的水平半径和垂直半径确定一个圆形。这个圆与边框的交集形成圆角效果。
圆形圆角
当水平半径和垂直半径不等时，需要分别书写，格式：border-top-right-radius: <length-percentage> <length-percentage>;，此时两个半径确定一个椭圆。这个椭圆与边框的交集形成圆角效果。
椭圆圆角
示例：
设置相等的水平半径和垂直半径
相等的水平半径和垂直半径简写为一个值
不等的水平半径和垂直半径
半径的值可以是以px等为单位的长度值，也可以是百分比。当值是百分比时，水平半径相对于盒模型的宽度，垂直半径相对于盒模型的高度。不管是长度值还是百分比值，负值均无效。
示例：
百分比
当只设置了一个圆角时，如果水平半径大于宽或垂直半径大于高，则实际效果会等比缩小水平半径和垂直半径，直至“水平半径等于宽且垂直半径小于等于高”或“垂直半径等于高且水平半径小于等于宽”。
示例：
半径比宽高大
当设置了多个圆角时，如果水平半径之和超过宽或垂直半径之和超过高，则实际效果会等比缩小各圆角半径，直至“水平半径之和等于宽且垂直半径之和小于等于高”或“垂直半径之和等于高且水平半径之和小于等于宽”。其中半径之和是指同一个水平方向或垂直方向上的圆角半径的和；对角线的两个圆角半径之和超出不影响，各自受宽高约束。
比如：
width: 40px;
height: 30px;
border-top-left-radius: 100px 400px;
border-top-right-radius: 500px 300px;
border-bottom-right-radius: 400px 100px;
border-bottom-left-radius: 300px 200px;
那么水平方向上最大的半径之和是700px，垂直方向上最大的半径之和是600px。水平方向半径之和是宽的17.5倍，垂直方向半径之和是高的20倍，所以各半径等比缩小20倍，因此等效于：
width: 40px;
height: 30px;
border-top-left-radius: 5px 20px;
border-top-right-radius: 25px 15px;
border-bottom-right-radius: 20px 5px;
border-bottom-left-radius: 15px 10px;
效果：
半径之和大于宽高
当使用简写属性border-radius时，如果值包含斜线/，那么斜线前的值是水平半径，斜线后的值是垂直半径；如果没有斜线，那么水平半径和垂直半径相同。border-radius四个值分别是top-left、top-right、bottom-right和bottom-left；如果省略了bottom-left，那么bottom-left和top-right值相等；如果省略了bottom-right，那么bottom-right和top-left值相等；如果省略了top-right，那么top-right和top-left值相等。
如：
border-radius: 1px 2px 3px 4px/5px 6px 7px 8px;
等效于
border-top-left-radius: 1px 5px;
border-top-right-radius: 2px 6px;
border-bottom-right-radius: 3px 7px;
border-bottom-left-radius: 4px 8px;
再如：
border-radius: 1px 2px 3px/4px 5px;
等效于
border-top-left-radius: 1px 4px;
border-top-right-radius: 2px 5px;
border-bottom-right-radius: 3px 4px;
border-bottom-left-radius: 2px 5px;
网友评论