当前位置:Gxlcms > html代码 > CSS3圆角边框的使用-遁地龙卷风

CSS3圆角边框的使用-遁地龙卷风

时间:2021-07-01 10:21:17 帮助过:41人阅读

0.快速入门

border-radius:50px;

1.border-radius详解

border-radius:50px;

上右下左,水平和垂直距离都是50px

border-radius:50%;

这里的%号是已应用该css样式元素的长度和宽度为基数的

border-radius:50% 30% ;

上下,水平垂直是50% 左右,水平垂直是30%

border-radius:50% 30% 10%;

上,水平垂直是50%,左右,水平垂直是30%,下,水平垂直是10%

border-radius:10% 50% 30% 10%;

上,水平垂直都是10%。右,平垂直都是50%。下,水平垂直都是30%。左,水平垂直都是10%

/前面是水平的,/后面是垂直的

border-radius:50% / 30% ;

上左下右,水平是50%,垂直是30%

border-radius:50% / 30% 10%;

上右下左,水平都是50%,上下垂直30%,左右垂直10%;

其余的规则在用/前都举例过,不一一叙述了

2.单独的设置

border-top-left-radius:10%;

border-top-left-radius:10% 30%;

与top对应的bottom,与left对应的right

人气教程排行