第五十五章 圆角

圆角么,好像挺简单的:

<div id="border-radius"></div>
#border-radius {width: 100%;height: 100px;border: 2px solid black;border-radius: 36px;}

如果两个圆角接在了一起的话……算了,索性四个都连接一起好了:

<div id="border-radius"></div>
#border-radius {width: 100px;height: 100px;border: 2px solid black;border-radius: 50px;}

这就是个圆了,啊啊,剩下你们自己发挥啊。

不过我们有四个角对不对?

#border-radius {width: 100px;height: 100px;border: 2px solid black;border-radius: 10px 20px 30px 40px;}

从左上角,顺时针旋转。至于两个值、三个值,你们自己动手吧,我不用这个凑字数了。

但,难道就这样了么?哼,怎么可能!

#border-radius {width: 100%;height: 100px;border: 2px solid black;border-radius: 50%;}

50% 就是一半,不管你多高多宽,就是一半,于是这不就有了椭圆么。

但是元素的宽高并不一定啊,我们想要精确的椭圆角怎么办?

#border-radius {width: 100%;height: 100px;border: 2px solid black;border-radius: 20px / 40px;}

给两个值,表示椭圆的两个轴半径。不过注意在四个角的表现不一样哦。第一个值表示横向,第二个值表示纵向。

最后展开一下,下面写法和上面等价:

border-top-left-radius:     20px 40px;border-top-right-radius:    20px 40px;border-bottom-right-radius: 20px 40px;border-bottom-left-radius:  20px 40px;

那就这样吧,讲多了你们消化不了。

原文链接:https://www.ek58.com/archives/3631,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?