·您当时的方位:主页 > 技能教程 > Html5技能 >

[CSS3]border-radius圆角用法

时刻:2019-01-25 16:08w3school
有必要呈现一个值,可长度可百分比,比方:border-top-left-radius:5px,border-top-left-radius:5px 50%都是可行

w3c特点值详解:
[ <length> | <percentage> ]:有必要呈现一个值,可长度可百分比,比方:border-top-left-radius:5px,border-top-left-radius:5px 50%都是可行
{1,2}: 表明他们的值最小能够重复一次,最大可重复两次。假设只需一个值,表明圆角,那么它的水平间隔和笔直间隔持平,即第二个值仿制第一个值;假设是两个值,那么确认一个椭圆角,第一个值椭圆的水平半径,第二值为椭圆的笔直半径,说起来有点拗口,直接上图:

只需1个值,如:border-top-left-radius:50px,表明半径为50px圆,如图:
左上角
标示错误了,盒子尺度为:300*100

假设有两个值,如:border-top-left-radius:50px 100px,表明水平半径为50px,笔直半径为100px的椭圆,如图:
左上角

同理 border-top-right-radius(右上圆角半径), border-bottom-right-radius (右下圆角半径),border-bottom-left-radius(左下圆角半径),也是如此。你只需记住当某个角为一个值时,确认是一个圆,当运用两个值确认一个椭圆。

抢手文章引荐

请稍候...