在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度云笔记