Open wingmeng opened 4 years ago
border-radius 属性用来定义边框的圆角。
border-radius
语法： border-radius: none | <length>{1,4} [/ <length>{1,4}]
border-radius: none | <length>{1,4} [/ <length>{1,4}]
取值说明：
none
<length>
常见取值举例：
border-radius: 20px
border-radius: 20px 40px
border-radius: 20px 40px 30px
border-radius: 20px 40px 30px 10px
border-radius: 20px / 40px
border-radius: 20px 30px / 40px 10px
border-radius: 20px 50px 30px / 40px 60px 10px
border-radius: 20px 50px 30px 10px / 40px 60px 10px 20px
> 在线 Demo <
border-radius属性用来定义边框的圆角。语法：
border-radius: none | <length>{1,4} [/ <length>{1,4}]取值说明：
none默认值，表示元素没有圆角。<length>数字和单位组成的长度值，不可为负数。常见取值举例：
border-radius: 20px边框四个角的圆角半径为 20pxborder-radius: 20px 40px边框左上和右下角的圆角半径为 20px，右上和左下的圆角半径为 40pxborder-radius: 20px 40px 30px边框左上角的圆角半径为 20px，右上角和左下角的圆角半径为 40px，右下角的圆角半径为 30pxborder-radius: 20px 40px 30px 10px边框左上、右上、右下和左下的圆角半径分别为 20px、40px、30px 和 10pxborder-radius: 20px / 40px半径分组模式（以 / 隔开），第一组表示圆角的水平半径，这里表示边框四个角的水平半径是 20px；第二组表示圆角的垂直半径，这里表示边框四个角的水平半径是 40pxborder-radius: 20px 30px / 40px 10px左上和右下角的水平圆角半径为 20px，右上和左下的水平圆角半径为 30px；左上和右下角的垂直圆角半径为 40px，右上和左下的垂直圆角半径为 10pxborder-radius: 20px 50px 30px / 40px 60px 10px左上角的水平圆角半径为 20px，右上角和左下角的水平圆角半径为 50px，右下角的水平圆角半径为 30px；左上角的垂直圆角半径为 40px，右上角和左下角的垂直圆角半径为 60px，右下角的垂直圆角半径为 10pxborder-radius: 20px 50px 30px 10px / 40px 60px 10px 20px边框四个角的水平圆角半径分别为 20px、50px、30px 和 10px（上右下左）；边框四个角的垂直圆角半径分别为 40px、60px、10px 和 20px（上右下左）> 在线 Demo <