CSS3圆角边框(border-radius)

在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。border-radius属性用于设置元素的外边框圆角。

语法:

border-radius: length;     /*值可以为像素px*/

radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果。

意思就是说radius默认会生成4个圆(圆的半径取决于border-radius的值),分别贴到盒子的四个角。盒子的角与圆之间有一定距离,这个距离形成圆角。

利用border-radius生成圆形

首先需要准备一个正方形盒子(必须是正方形,长宽像素相等),然后border-radius的值为正方形盒子长宽的一半即可生成圆形!

写法:

div {
     width: 200px;
     height: 200px;
     border-radius: 100px;      /*长宽的一半*/
}
  • 参数值可以为数值百分比的形式
  • 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%
  • 如果是个矩形,设置为高度的一半就可以做

复合写法:

div {
     width: 200px;
     height: 200px;
     border-radius: 10px 20px 30px 40px;
}

这是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角。

如果是一个值,代表4个角的圆角相同。

如果是两个值,那么是代表对角线的意思。左上角、右下角,右上角、左下角。

也可以分别定义某个角形成圆角:border-top-left- radius、 border-top- right-radius、 border- bottom- right- radius和border-bottom-left-radius

版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!

转载请注明:转载于37.2度云笔记

发表评论

您的电子邮箱地址不会被公开。

微信
通知:站点改版中,敬请期待