温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS3边框border-radius

发布时间:2020-07-18 04:07:37 来源:网络 阅读:399 作者:mazey 栏目:web开发

一、官方解释

设置或检索对象使用圆角边框。提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数。

水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。

如果只提供一个,将用于全部的于四个角。

如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。

如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。

垂直半径也遵循以上4点。

对应的脚本特性为borderRadius。

二、例子

2.1 四个参数值
<div ></div>
<div ></div>
<div ></div>
<div ></div>

所以border-radius里面的参数应该代表的是四个角上圆的半径。

2.2 百分比
<div ></div>
<div ></div>
2.3 水平半径/垂直半径
<div ></div>
<div ></div>
<div ></div>

这里的半径全等于本身宽度(width/2)+半径宽度(border-width/2)即为一个椭圆。另外半径最多渲染宽度(width/2)+半径宽度(border-width/2)的值,超过的按比例值来算。

CSS3边框border-radius

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI