作者:纯洁的老宁同志 | 来源:互联网 | 2023-02-03 10:53
我了解到我们可以使用这种语法制作椭圆border-radius.
border-radius: horizontal radius / vertical radius
首先,我试过border-radius: 10px 20px/10px
,哪个有效.
然后,我试过border-radius: 20px/10px 10px/10px
,它没有用,Chrome Developer Tool强调它是错误的.
困惑和沮丧,我去了MDN,并且更加困惑.
它显示了这样的东西border-radius: 10px 5% / 20px 25em 30px 35em
,不是很奇怪吗?虽然他们在评论中提到价值属于/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
,但是什么是first radius values
.
我调查了一下,看起来更加混乱.我知道我错过了什么,但不知道是什么!
1> Niet the Dar..:
仔细看看,你有:
border-radius: TLH TRH BRH BLH / TLV TRV BRV BLV;
其中
T/B是顶部/底部,
L/R是左/右,和
H/V是水平/垂直
如果您没有"/垂直尺寸",则默认为复制水平尺寸(因此为圆角).如果您没有4种尺寸,则会重复您给出的值.
一旦您掌握了基本结构,您就可以尝试使用值并查看会发生什么.这是学习做什么的好方法:)