星空网 > 软件开发 > 网页设计

CSS3圆角边框的使用

0.快速入门

border-radius:50px;

CSS3圆角边框的使用

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

 




原标题:CSS3圆角边框的使用

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

东南亚电商Zalora开启Harbolnas12.12大促:https://www.ikjzd.com/articles/135815
亚马逊宣布黑五网一战绩:销售额超过48亿美元:https://www.ikjzd.com/articles/135816
香港公司按时做年审,审计还是被罚款?:https://www.ikjzd.com/articles/135817
亚马逊遇到退货怎么办?:https://www.ikjzd.com/articles/135818
分享几个佛教用品的独立站:https://www.ikjzd.com/articles/135819
卖家使用第三方物流自送到华东仓注意事项:https://www.ikjzd.com/articles/135820
2024.03.29亚马逊选品推荐(仅供参考):宠物饮水机滤芯片:https://www.kjdsnews.com/a/1836532.html
想要搞钱,就去做离搞钱最近的事:https://www.kjdsnews.com/a/1836533.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流