/* 语法 */ border-radius: top-left top-right bottom-right bottom-left / x1 x2 y1 y2; /* 示例 */ border-radius: 50% 50% 0 0 / 100px 100px 0 0;
其中,border-radius属性有两个值,一个是圆角半径值,一个是裁剪椭圆的x半径值和y半径值。圆角半径值可以简写为一个数值或者一个百分比,也可以分别设置四个角的半径值。椭圆的x半径值和y半径值可以简写为一个数值或者使用“/”符号分隔开分别设置四个角上的椭圆的半径值。
如果圆角半径值与椭圆的x半径值和y半径值之间的数值不一致,则用最小值进行拉伸,来实现半圆边框的效果。可以通过在不同的角落设置不同的圆角半径和椭圆半径来实现异形半圆边框效果。
注意:使用border-radius属性时,一定要加上浏览器前缀,以兼容不同浏览器。例如:
-webkit-border-radius: 50% 50% 0 0 / 100px 100px 0 0; -moz-border-radius: 50% 50% 0 0 / 100px 100px 0 0; border-radius: 50% 50% 0 0 / 100px 100px 0 0;