无名阁,只为技术而生。流水不争先,争的是滔滔不绝。

HTML+CSS CSS3圆角属性详细讲解border-radius(图文详解)

CSS dancy 1年前 (2023-12-08) 261次浏览 已收录 0个评论 扫描二维码
HTML+CSS CSS3圆角属性详细讲解border-radius(图文详解)

HTML+CSS CSS3圆角属性详细讲解border-radius

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

【基础知识】

border-radius使用最多的可能就是通过改变圆角来使元素变的圆滑,常用方法可能如下:

border-radius: 4px 4px 4px 4px;
border-radius: 4px;

/* 等价于:*/
border-top-left-radius:     4px;
border-top-right-radius:    4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius:  4px;

上述方法可能就是常用方法,但是border-radius也有/这种用法,比如:

border-radius: 50% / 30%

/* 等价于: */
border-top-left-radius:     50% 30%;
border-top-right-radius:    50% 30%;
border-bottom-right-radius: 50% 30%;
border-bottom-left-radius:  50% 30%;

点击展开
喜欢 (0)
[]
分享 (0)
关于作者:
发表我的评论
取消评论

评论审核已启用。您的评论可能需要一段时间后才能被显示。

表情 贴图 加粗 删除线 居中 斜体 签到