borderradius

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

【基础知识】

最常用的边界半径可能是通过改变圆角使元素平滑。常见的方法如下:

border-radius:4px 4px 4px 4px;边框-半径:4px/*相当于:*/border-top-left-radius:4px;border-top-right-radius:4px;边框-底部-右侧-半径:4px边框-底部-左侧-半径:4px以上方法可能是常用方法,但是border-radius也有/这种用法,比如:

Border-radius: 50%/30%/*相当于:*/border-top-left-radius:50% 30%;边框-顶部-右侧-半径:50% 30%;边框-底部-右侧-半径:50% 30%;边框-底部-左侧-半径:50% 30%;-

举例【相同半径】

至于两者的区别,就要说说border-radius是如何改变圆角的了。我们可以在开头引用一下就知道它的理论意义,但真实情况如下:

borderradius

我们看到A代表圆的半径,圆控制一个角度。所以我们可以看到会有四个圈。通过设定这四个圆的半径所画出的图形就是圆角图形。

举例【不同半径】

从这里我们可以发现,如果不希望圆的半径相同,我们使用第二段代码的写法,也就是X/Y的写法,具体意思如下:

【扩展】

这样我们就可以控制圆的不同半径。再次发散,如果我们控制每个圆的半径不一样会怎么样?

通过这样设置不同的半径,可以实现一些简单的图形。https://9elements.github.io/fancy-border-radius/#

【疑问】

边界半径:50%;边框半径:100%;一个小问题,50%和100%有什么区别?目测50%和100%可以完成一个圆,但两者有什么区别?

提示:当border-radius使用%时,radius的值是元素的宽度和高度。

如果你觉得这篇文章对你有帮助,我很高兴。关注【前端小白成长记录】。每天都能看到短小但实用的文章。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。

发表回复

登录后才能评论